Question

相当绿色的整个网络开发的东西。我有一个HTML文档，其中包含一个链接列表（LI），单击它时，它下面的区域会扩展，并显示更多文本。

例如，您有一个书名，当您点击它时，书下会显示有关该书的信息。您再次单击它或单击页面上的另一个LI它将消失。

我的样式很好，但似乎无法弄清楚JavaScript或JQuery。这是HTML：

<li class="parent"><a href="#">The Wheel of Prison Operations: Useful Tool for Successful
Management of Security</a></li>
<ul class="story">
  <li>Publication, authored “The Wheel of Prison Operations: Useful
    Tool for Successful Management of Security”. June/July1999 issue
    of “Correctional Security Report” a national publication on
    correctional security operations.</li>
  </ul></br>

  <li class="parent"><a href="#">Use Of Force - Current Practice and Policy</a></li>
    <ul class="story">
      <li>Book on Use of Force in Prisons, September 1998, asked to co-author a book on use of force in
        prisons to be published by the American Correctional Association on use of force in US and
        Canadian Prisons. Use Of Force - Current Practice and Policy Published November 1999.
        Advertised as ACA “Bestseller” for several years.</li>
      </ul></br>

这是JavaScript（尝试）：

    <script>
  $(document).ready(function(){
    $(".story").css("visibility", "hidden");

    $("li").click(function() {
      $(this).children().css("visibility", "visible");
    });
  });
</script>

和/或者这也没有用

    <script>
 $(document).ready(function() {
  $('.parent').click(function() {
      $('.story').toggleClass('visible');
  });
});
    </script>

我愿意接受有关如何更清洁或我可能搞砸的建议。试着抓住这个，因为它很有趣。提前谢谢。

Answer 1

从您开始，您不能将var props = from p in this.GetType().GetProperties() let attr = p.GetCustomAttribute<PropertyIsMailHeaderAttribute>() where attr != null && attr.HeaderAttribute == "FooBar" && attr.Type = ParamType.open select whatever;和<br>作为<ul>的兄弟。将BR和UL标签放置为LI儿童

修复HTML标记后，您可以使用jQuery，甚至只使用CSS

更好的HTML标记就像：

<li>

除了改变你的jQuery逻辑之外（至少关于选择器，除了所有修复以滑动书籍内容的故事）

这是一个快速演示：

＆＃13;

<ul id="books">

  <li>
    <h2>Book 1</h2>
    <div>
      Book 1 story here
    </div>        
  </li>

  <li>
    <h2>Book 2</h2>
    <div>
      Book 2 story here
    </div>        
  </li>

</ul>

＆＃13;

jQuery(function($){

  var $allBooksStories = $("#books li > div");

  $("#books h2").click(function(){
    $allBooksStories.slideUp();
    $(this).next("div").stop().slideToggle();
  });

});

＆＃13;

*{margin:0;}
#books div{
  display:none; /*Hide all stories initially*/
}

＆＃13;

Answer 2

请尝试以下操作：您只需切换点击的父ul下的故事li，而不是所有故事ul。另外，您的帖子中没有看到visibility CSS类，因此只使用了toggle()

 $(document).ready(function() {
      //hide all story ul by default on page load
      ('.story').hide();

      $('.parent').click(function() {
          //find story under clicked parent, where $(this) is instance of clicked element
          $(this).find('.story').toggle();
      });
    });

LI被点击并显示另一个LI但不显示页面上的其余部分

2 个答案: