Question

我希望默认隐藏某些信息，并在点击该项目时将其显示出来。我从网上抓起了一个切换脚本，但出于某种原因，它正在做与我想要的相反的事情。

这是头标记之间的脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("p").click(function(){
        $("ul").toggle();
      });
   });
</script>

以下是正文中的代码：

<p class="toggle">+ Apple iPad 2</p>
<ul>
  <li>Display Screen (LCD) Only Replacement - $99.99</li>
  <li>Top Glass (Digitizer) Only Replacement (Black) – $109.99</li>
  <li>Top Glass (Digitizer) Only Replacement (White) – $109.99</li>
</ul>

如果有人能解释我做错了什么，我真的很感激。谢谢！：）

Answer 1

加载页面后隐藏，然后在点击时切换：

$(document).ready(function(){
    $("ul").hide(); //added this line
    $("p").click(function(){
        $("ul").toggle();
    });
});

Answer 2

这是一个工作小提琴：http://jsfiddle.net/2L0efebh/1/

<强>的JavaScript

$("p").click(function(){
   $("ul").toggle("slow");
});

<强> HTML

<p class="toggle">+ Apple iPad 2</p>
<ul class="unactive">
  <li>Display Screen (LCD) Only Replacement - $99.99</li>
  <li>Top Glass (Digitizer) Only Replacement (Black) – $109.99</li>
  <li>Top Glass (Digitizer) Only Replacement (White) – $109.99</li>
</ul>

<强> CSS

.unactive {
    display:none;
}

Answer 3

切换方法切换元素的可见性。在您的情况下，您没有隐藏 ul 元素，因为默认情况下，默认情况下会显示所有元素。注意最初 ul 的可见性如何设置为 display：none ，这仅表示display属性指定元素是否/如何显示。通过最初指定可见性，我们保持 ul隐藏，一旦用户点击该段落，切换功能将切换匹配元素的可见性，因此 ul 将向用户显示。以下是使其按您希望的方式工作的代码

<强> HTML

<p class="toggle">+ Apple iPad 2</p>
<ul class="inactive">
    <li>Display Screen (LCD) Only Replacement - $99.99</li>
    <li>Top Glass (Digitizer) Only Replacement (Black) – $109.99</li>
    <li>Top Glass (Digitizer) Only Replacement (White) – $109.99</li>
</ul>

<强> CSS

.inactive {
    display:none;
}

<强> JAVASCRIPT

$("p").click(function(){
    $("ul").toggle("slow");
});

为了更准确地理解切换功能，您可以查看here

内容切换问题

3 个答案: