Question

我知道这个问题已被提出并被回答了一百万次，但出于某种原因，我的工作并没有成功。我想点击里面的＆＃34; li＆＃34;它会被隐藏，直到你点击它，但它不想隐藏div。我从stackoverflow获得了这个功能，但它不会起作用。这是我的代码：

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();
        });
};

如果有人能帮助它成功，我将永远感激不尽！

Answer 1

以下是这样做的方法：

默认情况下，如果您不想显示某些内容，请将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();
  });
});

我让它可以切换，所以如果你再次点击#bioInfo，它会再次隐藏。如果您只想展示，可以将toggle()替换为show()

查看live example here。

Answer 2

使用此

＆＃13;

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

＆＃13;

#bioInfoText{
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

<强> 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示例

由于

在李中显示和隐藏div

3 个答案: