單擊複選框時如何停止手風琴（可摺疊）關閉

我希望用戶能夠在不關閉手風琴琴體的情況下選中複選框。單擊複選框時如何停止手風琴（可摺疊）關閉

但是，我試圖阻止傳播，我無法得到這個工作。

我使用MaterializeCSS框架，但它不提供任何選項來覆蓋此行爲。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.collapsible-header { 
 
    position: relative; 
 
} 
 

 
.test { 
 
    position: absolute; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 

 
<!-- Compiled and minified JavaScript --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 
 

 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<ul class="collapsible" data-collapsible="accordion"> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First 
 
     <span class="test"> 
 
     <input id="demo-1" name="demo-1" type="checkbox"> 
 
     <label for="demo-1"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">place</i>Second 
 
     <span class="test"> 
 
     <input id="demo-2" name="demo-2" type="checkbox"> 
 
     <label for="demo-2"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third 
 
     <span class="test"> 
 
     <input id="demo-3" name="demo-3" type="checkbox"> 
 
     <label for="demo-3"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
</ul>

任何想法？

來源

2017-08-02 edward

，我相信你的意思您不希望在單擊**另一個**選項卡的複選框時摺疊選項卡？ – Terry

說起來很簡單：只需從輸入組傳播（使用event.stopPropagation），它具有類的test在你的榜樣停止click事件：

$(function() { 
 
    $('.collapsible .test').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.collapsible-header { 
 
    position: relative; 
 
} 
 

 
.test { 
 
    position: absolute; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 

 
<!-- Compiled and minified JavaScript --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 
 

 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<ul class="collapsible" data-collapsible="accordion"> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First 
 
     <span class="test"> 
 
     <input id="demo-1" name="demo-1" type="checkbox"> 
 
     <label for="demo-1"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">place</i>Second 
 
     <span class="test"> 
 
     <input id="demo-2" name="demo-2" type="checkbox"> 
 
     <label for="demo-2"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
    <li> 
 
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third 
 
     <span class="test"> 
 
     <input id="demo-3" name="demo-3" type="checkbox"> 
 
     <label for="demo-3"></label> 
 
     </span> 
 
    </div> 
 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
 
    </li> 
 
</ul>

來源

2017-08-02 08:45:03 Terry

單擊複選框時如何停止手風琴（可摺疊）關閉

回答

相關問題