關於bootstrap的手風琴展開收合效果

jquery javascript

tenno081 2019-03-26 11:08:11 ‧ 6964 瀏覽

分享至

這是我表單的其中一部份，可以收合展開

這是我的html

<div class="box-header">
    @*<h3 class="box-title form-box-title">家族病史</h3>*@
    <a class="accordion-toggle box-title form-box-title" data-toggle="collapse" data-parent="#accordion"
       href="#collapseOne">
        家族病史
    </a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
    <div class="box-body family">
        <div class="form-flex-container">
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">高血壓</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhHypertensionList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">腎臟病</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhKidneyDiseaseList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">氣喘</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhAsthmaList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">癲癇</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhEpilepsyList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">心臟病</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhHeartDiseaseList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">消化性潰瘍</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhPepticUlcerList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">肺結核</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhTuberculosisList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">精神分裂</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhSchizophreniaList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">糖尿病</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhDiabetesList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">癌症</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhCancerList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">肝臟疾病</label>
                </div>
                <div class="col-input">
                    @Html.CInputCheckboxFor(m => m.FhLiverDiseaseList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
            <div class="row-flex">
                <div class="col-label">
                    <label class="control-label">其他</label>
                </div>
                <div class="col-input">
                    @Html.TextBoxFor(m => m.FhOtherDesc, new { @class = "form-control" })
                    @Html.CInputCheckboxFor(m => m.FhOtherList, "HNEV046", null)
                </div>
            </div><!-- /.row -->
        </div><!-- /.form-flex-container -->
    </div><!-- /.box-body -->
</div>

現在我想追加一個判斷，在入時如果我這個表單裡沒勾選任何選項，就會自動收起，

有勾選就自動展開，我目前沒勾選會自動收起，可是我想再把它點開卻無法展開，想請

問該如何處理?

這是我的Jquery

    if ($(".FhHypertension").is(':checked')==true) {
        $('.family').show(); 
    } else {
        $('.family').hide();    
    }

Luis-Chen iT邦新手 4 級 ‧ 2019-04-09 08:30:21 檢舉

這是我第二個聽過把accordion 翻譯成手風琴的ＸＤＤ

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-03-26 11:34:59

最佳解答

給你一個提示。

因為你的條件是沒勾選就收起來。
但你並沒給與特定條件可以在沒勾選時打開。

所以你需要思考一個沒勾選的情況下能打開的方式。
一般我會建議你兩種做法。

1.參數式的判斷法：
你可以給與一個屬性或是參數。來記錄要不要開合。你也可以將其視為一種開關。
一但該參數為「真」就是無視任何條件打開。
這招有個麻煩性，就是你一但全部沒勾選的情況下。就得要去修改參數。
當然也可用另外的處理方式，也就是時間式自動關閉。

2.預設值勾選法：
一但點開時，就先將某個值先勾選。讓它觸發打開的動作。

因為其實要看你的操作情況來決定要用哪一種方式。只要記得條件式不要是矛盾的就行了。

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

fillano iT邦超人 1 級 ‧ 2019-03-26 13:32:15 檢舉

我是覺得他應該把介面改成真的手風琴，不然很難使用手風琴的XD

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-03-26 13:33:30 檢舉

這個梗我懂。重點是他不知道明不明白@@"

tenno081 iT邦研究生 4 級 ‧ 2019-03-26 14:14:07 檢舉

好吧，我不能說很明白
但這是我目前的程式碼

  if ($(".FhHypertension").attr('checked')) {      
        $('.family').show(); 
    } else {
        $('.family').hide();       
    }

    $(".boxfamily").click(function () {
        $('.family').show();
    });

大略上有我要的結果，最後的瑕疵就是如果沒值，點一下後還是會收起
要再點一次才會展開......

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-03-26 15:32:09 檢舉

其實，我只能說。
很多東西你用錯地方了。這是從你之前的問題整理而來

何謂模型、何謂動作
目前你並不太清楚原理。自已搞的不是很清楚。

你要的東西我只做提示，能不能意會就請自行去思考吧。

1.先決定好你的動作。如果是我的話。我會分成三個動作。
「全展開」「全收合」「資料展開」

2.不用說，全展開就是將family給show出來。全收合就是將family給hide。這點因該明白。重點在於後面的「資料展開」。

3.你的 $(".FhHypertension").attr('checked') 這段的想法是對的。但指向的元件是不對的。
正確來說，你的family是整體的包容元件。你的row-flex才是各別條列元件。如果你要針對各列展開個別設定處理。就得去針對你的row-flex來做處理。

最後要跟你說的。先搞清楚一下jquery的應用。你目前所寫的東西。其實還帶有點javascript的書寫方式。(一條龍直列式寫法)
jquery的應用中其實已經有包含了一些些物件及模組的應用方式。
你要懂的如何去應用跟處理。
現在為何一直不直接跟你說答案的原因。我也明白的告訴你好了。
你的出發點已經錯了。這樣的功能並不會這樣子搞。
而且再加上，你目前還不懂一些術語。(手風琴展開啥鬼說法)
且你所寫的東西跟所問的東西。會有點出入。實在不知道該從什麼方向告訴你。

還有問題就再提吧。但我會先建議你先想好自已要的東西倒底是什麼。不要看到相似好像的寫法就想要拿來用。了解原理才是王道。

tenno081 iT邦研究生 4 級 ‧ 2019-03-26 16:31:53 檢舉

感謝您的解答，只是我目前全展開跟全收合是用bootstrap
的折叠（Collapse）插件來實現

然後手風琴說法是我找資料時看到的，既然是錯的就手誤吧
我會再想想該怎麼實現，感謝解說

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-03-26 17:30:49 檢舉

這邊其實再跟你提醒一下好了。
bootstrap的Collapse是利用的css跟搭配了一點jquery來做控制的。

認真來說，你上面用的語法。並非是bootstrap的語法。而是jquery用的語法。

你要找對應的程式。要往jquery的領域去找。

bootstrap的主力是負責美化。它沒jquery是不行的。(雖然有其它對應)
找答案的方向盡量不要搞錯。

登入發表回應

Rex Chien

iT邦新手 4 級 ‧ 2019-03-27 09:31:22

根據 Bootstrap 官方文件（不知道你是用哪個版本，但 3.4.2 跟 4.3.x 用法一樣），有設定對應 data-* 屬性的標籤就可以收起或展開指定的區塊了。

<a class="accordion-toggle box-title form-box-title" data-toggle="collapse" data-parent="#accordion"
       href="#collapseOne">
    家族病史
</a>

至於載入後根據特定條件來切換預設狀態，既然用了 Bootstrap collapse 就建議不要用 jQuery 來做，可以改用 Bootstrap 提供的 JavaScript 方法：

$('#collapseOne').collapse('show');
$('#collapseOne').collapse('hide');

回應 3
分享
檢舉

tenno081 iT邦研究生 4 級 ‧ 2019-03-27 10:42:10 檢舉

感謝，最後我是這樣做

 $('.FhHypertension, .FhKidneyDisease, .FhAsthma,.FhEpilepsy,.FhHeartDisease,.FhPepticUlcer,.FhTuberculosis,.FhSchizophrenia,.FhDiabetes,.FhCancer,.FhLiverDisease,.FhOther, .boxfamily').each(function () {       
        if ($(this).attr('checked')) {
            $('#collapseOne').collapse('show');
        }  
    });

Rex Chien iT邦新手 4 級 ‧ 2019-03-27 11:18:19 檢舉

這個做法如果在新增選項後還得修改對應的 JavaScript，建議可以把 selector 往上抓一點，應該會比較好維護

const checkedItems = $('#collapseOne :checkbox:checked');
if(checkedItems.length > 0) {
    // show collapse
}

tenno081 iT邦研究生 4 級 ‧ 2019-03-27 11:42:28 檢舉

太感謝了，我還在想要怎麼把它弄得更彈性，謝謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙