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的结构完全相同，唯一的区别是列表项的内容。

我删除了服务器上的display：none，并将其添加到@ Mohammed-Yusef建议的css .showData类中

这是当前的jQuery：

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

Answer 1

click函数的jquery语法应该如下所示，在你的css中你隐藏了所有li元素。因此，您必须使用选择器$('.showData li')而不是$('.showData')将其切换回来。也可以使用.icon-btn代替.icon-button，因为您的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-btn所以请使用$('.icon-btn')而不是$('.icon-button')

你可以使用

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

并在css中使用

.showData{
   display: none;
}

并从display:none

中删除.services ul li

注意：请务必包含jquery

Answer 3

请尝试

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

使用jQuery单击按钮后切换列表项

3 个答案: