jQueryを使用してボタンをクリックした後にリスト項目を切り替えます

Question

リスト項目を順序なしリストに表示するためにボタンを取得できました。しかし、今度はボタンをクリックするたびに、順序のないリストにネストされたすべてのリスト項目が表示され、ボタンを再度クリックすると消えます。

これは私の更新されたHTMLれる：

<div class="container-fluid text-center bg-black" id="services"> 
<div class="services"> 
<h2>SERVICES</h2> 
<br> 
<div class="row"> 
<div class="col-sm-3 iconpad-even"> 
    <img src="img/icons/icon_data_edit.png" alt="data"/> 
    <button class="icon-btn" data-button="btnData">DATA</button> 
    <ul class="showData"> 
    <li>Design</li> 
    <li>Cable Installation</li> 
    <li>Testing</li> 
    <li>CAT5e, CAT6, CAT6A</li> 
    </ul> 
</div> 

<div class="col-sm-3 iconpad-odd"> 
    <img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" /> 
    <button class="icon-btn" data-button="btnFiber">FIBER</button> 
    <ul class="showData"> 
    <li>Consultancy</li> 
    <li>Building to Building</li> 
    <li>Network Backbone</li> 
    <li>Testing</li> 
    </ul> 
</div> 

基本的に私は、まったく同じように構成されている6つのdivのを持っている、唯一の違いは、リスト項目のコンテンツです。

私は表示を削除しました：サービスUL李上のどれと@モハメッド・ユセフ

により示唆されるようにCSS .showDataクラスにこれを追加しましたがここでは、現在のjQueryません：

$(function() { 
$('.icon-btn').on('click', function() { 
$('.showData').toggle();  
}); 
}); 

Answer 1

click関数のjquery構文は、次のとおりである必要があります。また、CSS内ではli要素をすべて非表示にする必要があります。だから$('.showData')の代わりにセレクタ$('.showData li')でそれらを切り替えなければなりません。また、.icon-buttonの代わりに.icon-btnを使用してください。あなたのhtmlにそのようなクラスが記述されていないからです。

$('.icon-btn').on('click', function() { 
    $('.showData li').toggle();  
}); 

の作業スニペット、

$(function() { 
 
$('.icon-btn').on('click', function() { 
 
    //$('.showData li').toggle(); 
 
    $(this).next('.showData').find('li').toggle(); 
 
}); 
 
});

.services ul li { 
 
display: none; 
 
margin-left: -1.8em; 
 
/*color: #fff;*/ 
 
list-style: none; 
 
margin-bottom: 1em; 
 
font-size: 20px; 
 
font-weight: bold; 
 
font-family: 'Oswald', 'open-sans'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid text-center bg-black" id="services"> 
 
<div class="services"> 
 
<h2>SERVICES</h2> 
 
<br> 
 
<div class="row"> 
 
<div class="col-sm-3 iconpad-even"> 
 
    <img src="img/icons/icon_data_edit.png" alt="data"/> 
 
    <button class="icon-btn" data-button="btnData">DATA</button> 
 
    <ul class="showData"> 
 
    <li>Design</li> 
 
    <li>Cable Installation</li> 
 
    <li>Testing</li> 
 
    <li>CAT5e, CAT6, CAT6A</li> 
 
    </ul> 
 
</div> 
 

 
<div class="col-sm-3 iconpad-odd"> 
 
    <img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" /> 
 
    <button class="icon-btn" data-button="btnFiber">FIBER</button> 
 
    <ul class="showData"> 
 
    <li>Consultancy</li> 
 
    <li>Building to Building</li> 
 
    <li>Network Backbone</li> 
 
    <li>Testing</li> 
 
    </ul> 
 
</div>

Answer 2

問題は、あなたがあなたのicon-buttonボタンがとても代わり$('.icon-button')

の$('.icon-btn')を使用し、使用できるクラスicon-btnを持つクラスを持つ要素を持っていないということです

$(function() { 
$('.icon-btn').on('click', function() { 
    $('.showData').toggle();  
}); 
}); 

とCSSの使用中

.showData{ 
    display: none; 
} 

と注意

.services ul liからdisplay:noneを削除：はjqueryの

Answer 3

を含めるようにしてください

それを試してみてください。