在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

回答

相關問題