Question

我试图使列表项在单击时出现。当我使用hide（）方法时，它们开始是隐藏的，但是当我添加show（）方法时，它只能工作大约一毫秒。不确定是否因为它总是默认返回到原始设置？我基本上只想单击主列表<a>（在这种情况下是主列表），然后显示其他两个

$(function() {
  $('.sublist').hide();
  $(".mainlist").on('click', function() {
    $('.sublist').show();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="" class="mainlist">Main List</a>
    <li>
      <a href="" class="sublist">Sublist One</a>
    </li>
    <li>
      <a href="" class="sublist">Sublist Two</a>
    </li>
  </li>
</ul>

Answer 1

单击链接后，整个页面都会刷新。这意味着您的代码将再次运行：

$('.sublist').hide();

您应该做的是防止出现以下默认行为：

$(".mainlist").on('click', function(event) {
      $('.sublist').show();
      event.preventDefault();
    });

Answer 2

问题在于，当您单击那些a元素时，由于它们上的href=""，因此页面将被重新加载。因此，div开始是隐藏的，然后单击以显示它们，但是页面刷新后又恢复为隐藏状态（由于这是新加载页面上的默认状态，这要感谢您的hide调用页面就绪回调）。

如果您不希望遵循这些链接，请在jQuery处理程序中通过preventDefault（或return false）单击它们时阻止默认操作：

$(function() {
  $('.sublist').hide();
    $(".mainlist").on('click', function(e) {
      e.preventDefault();
      $('.sublist').show(); 
    }); 
})

实时示例：

$(function() {
  $('.sublist').hide();
    $(".mainlist").on('click', function(e) {
      e.preventDefault();
      $('.sublist').show(); 
    }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul>
      <li>
        <a href="" class="mainlist">Main List</a>
        <li>
          <a href="" class="sublist">Sublist One</a>
      </li>
      <li>
        <a href="" class="sublist">Sublist Two</a>
      </li>
      </li>
    </ul>

或者，您可以使用一种技巧：href="javascript:;"，但是最好使链接有意义，然后使用脚本来提供含义。

单独：您不能像这样直接在另一个li内部放置li，而在其中需要另一个ul（或ol）。有关详细信息，请参见那些链接。

Answer 3

有两个问题：

首先，您将li元素直接嵌套在li元素内-如果要“子列表”，则需要将子项目包装在ul内（请参见修改后的代码）。

其次，链接被跟随，这导致页面刷新。如果您只想显示sublist个项目，那么您应该在事件上使用event.preventDefault（请参见下面的修改代码）。

// no-conflict safe document ready
jQuery(function($) {
  $('.sublist').hide();
  // click event accepts one argument for the "event"
  $(".mainlist").on('click', function(e) {
    // prevent the default "click" action (which is to load the url the link points to)
    e.preventDefault();
    $('.sublist').show();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="" class="mainlist">Main List</a>
    <!-- nested li elements need to be wrapped inside a ul -->
    <ul>
      <li>
        <a href="" class="sublist">Sublist One</a>
      </li>
      <li>
        <a href="" class="sublist">Sublist Two</a>
      </li>
    </ul>
  </li>
</ul>

Answer 4

由于您使用的是锚点a标签，并且有一个空的href属性，因此默认行为应该是在锚点单击时重定向页面。解决方法是在点击回调中使用href="javascript:void(0)"或event.preventDefault()

$(function() {
    $('.sublist').hide()
    $(".mainlist").on('click', function(e) {
      /* here, prevents redirection */
      if (e) { e.preventDefault() }
      $('.sublist').show()
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="javascript:void(0)" class="mainlist">Main List</a>
    <li>
      <a href="" class="sublist">Sublist One</a>
    </li>
    <li>
      <a href="" class="sublist">Sublist Two</a>
    </li>
  </li>
</ul>

Answer 5

这部分代码：

$(".mainlist").on('click', function() {
  $('.sublist').show(); 
});

告诉您仅在点击事件期间显示列表。

为什么不使用fadeIn（）效果函数呢？

 $( "#appears" ).hide();
$( "#clickme" ).click(function() {
  $( "#appears" ).fadeIn( "slow", function() {
  });
});

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
 
   <div id="clickme">
    Click here
    </div>

    <div id="appears">
      <ul>
        <li>I'm a list</li>
       </ul>
    </div>
 
  </body>
</html>

为什么show（）仅能瞬间使用？

5 个答案: