Toggle list items after button click using jQuery

问题

So i managed to get my buttons to show the list items in the unordered list. But now every time i click a button all the list items nested in unordered list appears and disappears when the button is clicked again.

This is my updated 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>

Basically i have 6 div's that are structured the exact same way, only difference is the content on the list items.

I've removed the display:none on the services ul li and added it to the css .showData class as suggested by @Mohammed-Yusef

Here's the current jQuery:

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

回答1:

The jquery syntax of the click function should be as given below and also in your css you are hiding all the li elements. So you have to toggle them back with the selector $('.showData li') instead of $('.showData'). Also use .icon-btn instead of .icon-button as you don't have such a class mentioned in your html.

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

Working snippet,

$(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>

回答2:

Please try it

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

回答3:

The problem is that you don't have an element with a class icon-button your button has a class icon-btn so use $('.icon-btn') instead of $('.icon-button')

and you can use

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

and in css use

.showData{
   display: none;
}

and remove display:none from .services ul li

Note: be sure to include jquery

来源：https://stackoverflow.com/questions/44016164/toggle-list-items-after-button-click-using-jquery

标签

javascript

jquery