在li上显示并隐藏div

我知道这个问题已经被提出并回答了一百万次，但由于某种原因，我的工作不起作用。我想要点击里面的“李”的div显示，它会隐藏，直到你点击它，但它不想隐藏div。我从stackoverflow得到的功能，但它不会工作。这里是我的代码：在li上显示并隐藏div

HTML：

 <div class="small"> 
    <h2>Bio Technology</h2> 
    <br> 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
    <ul> 
     <li id="bioInfo" class="red">Information 
     <div id="bioInfoText">Although biotechnology is a young discipline....</div> 
     </li> 
     <li id="bioFuture" class="orange">Future</li> 
     <li id="bioCont" class="yellow">Content</li> 
     <li id="bioAdd" class="brown">Additional</li> 
     <li id="bioPrac" class="black">Practical</li> 
    </ul> 
</div>

这里是我的JS：

 $(document).ready(function(){ 
    $("#bioInfoText").hide(); 
    $("#bioInfo").on("click"function(){ 
     $("#bioInfoText").show(); 
     }); 
};

我将永远感激，如果有人可以帮助，使其工作！

来源

2016-12-13 Gerrit ten Napel

事件后“点击”添加'，' –

下面是做到这一点的方式：

默认情况下，如果你不想显示的东西，保持display: none为内联。

HTML：

<div class="small"> 
    <h2>Bio Technology</h2> 
    <br> 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
    <ul> 
     <li id="bioInfo" class="red">Information 
     <div id="bioInfoText" style="display: none;">Although biotechnology is a young discipline....</div> 
     </li> 
     <li id="bioFuture" class="orange">Future</li> 
     <li id="bioCont" class="yellow">Content</li> 
     <li id="bioAdd" class="brown">Additional</li> 
     <li id="bioPrac" class="black">Practical</li> 
    </ul> 
</div>

JS：

$(document).ready(function(){ 
    $('#bioInfo').on('click', function(){ 
    $('#bioInfoText').toggle(); 
    }); 
});

我已toggable，因此，如果您在#bioInfo再次单击，它会再次隐藏。如果你想它只显示，你可以用show()

替换toggle()退房live example here。

来源

2016-12-13 19:25:21

谢谢Sankalp，这似乎对你拨弄工作，所以它应该工作，但由于某种原因它不工作对我程序，我不知道为什么，我从字面上逐字复制了它... –

您是否包含jquery？ –

我做了，是在我的标题。 –

使用本

$(document).ready(function(){ 
 
    $("#bioInfo").on("click", function(){ 
 
     $("#bioInfoText").show(); 
 
    }); 
 
});

#bioInfoText{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="small"> 
 
    <h2>Bio Technology</h2> 
 
    <br> 
 
    <img src="bio.jpg" id="bioTech" alt="bioTech"> 
 
    <ul> 
 
     <li id="bioInfo" class="red">Information 
 
     <div id="bioInfoText">Although biotechnology is a young discipline....</div> 
 
     </li> 
 
     <li id="bioFuture" class="orange">Future</li> 
 
     <li id="bioCont" class="yellow">Content</li> 
 
     <li id="bioAdd" class="brown">Additional</li> 
 
     <li id="bioPrac" class="black">Practical</li> 
 
    </ul> 
 
</div>

来源

2016-12-13 19:27:10

HTML

<div class="small"> 
<h2>Bio Technology</h2> 
<br> 
<img src="bio.jpg" id="bioTech" alt="bioTech"> 
<ul> 
    <li id="bioInfo" class="red">Information 
    <div id="bioInfoText" style="display: none;">Although biotechnology is a young discipline....</div> 
    </li> 
    <li id="bioFuture" class="orange">Future</li> 
    <li id="bioCont" class="yellow">Content</li> 
    <li id="bioAdd" class="brown">Additional</li> 
    <li id="bioPrac" class="black">Practical</li> 
</ul> 
</div>

jQuery的

$(document).ready(function(){ 
$('#bioInfo').on('click', function(){ 
$('#bioInfoText').toggle(); 
}); 
});

这是Fiddle例如

感谢

来源

2016-12-13 19:32:12

在li上显示并隐藏div

回答

相关问题