Question

我是jQuery的新手，我正在尝试制作一个在单击标题时打开或关闭的表单部分。

标题位于类.entrysection之外，因此不应隐藏标题（我认为）。但是当我打开页面查看它时，标题被隐藏，因此没有切换来打开这些部分。

这是我页面的缩写版本，但我认为这足以证明我正在尝试做的事情。如果我能提供更多有用的信息，我会。

$(document).ready(function() {
  $('.entrysection').hide();
  $('.sectiontitle h3').toggle(
    function() {
      $(this).next('.entrysection').slideDown();
      $(this).addClass('close');
    },
    function() {
      $(this).next('.entrysection').fadeOut();
      $(this).removeClass('close');
    }
  ); // end toggle
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectiontitle">
  <h3>A Header</h3>
  <div class="entrysection">
    <p>Some silly unimportant stuff</p>
  </div>
</div>
<div class="sectiontitle">
  <h3>Another Header</h3>
  <div class="entrysection">
    <p>Yet more unimportant stuff</p>
  </div>
</div>
<div class="sectiontitle">
  <h3>Yet Another Header</h3>
  <div class="entrysection">
    <p>The least important stuff yet</p>
  </div>
</div>

Answer 1

正如Rory所建议的，交替点击的切换版本已弃用。你可以做的是使用toggleClass和slideToggle助手。

 $(document).ready(function () {
    $('.entrysection').hide();
    $('.sectiontitle h3').click(function () {
        $(this).next('.entrysection').slideToggle();
        $(this).toggleClass('close');
    });
});

＆＃13;

<!DOCTYPE html>
 <html>
    <head>
      <script      
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" 
>
      </script>
     <script>
         $(document).ready(function() {
 $('.entrysection').hide();
  $('.sectiontitle h3').click(function() {
   $(this).next('.entrysection').slideToggle();
            $(this).toggleClass('close');

     });
}); // end ready
</script>
</head>
<body>
<div class="sectiontitle">  
         <h3>A Header</h3>
            <div class="entrysection">
                <p>Some silly unimportant stuff</p>
            </div>
            </div>
<div class="sectiontitle">  
         <h3>Another Header</h3>
            <div class="entrysection">
                <p>Yet more unimportant stuff</p>
            </div>
            </div>
 <div class="sectiontitle"> 
         <h3>Yet Another Header</h3>
            <div class="entrysection">
                <p>The least important stuff yet</p>
            </div>
            </div>
</body>
</html>

＆＃13;

Answer 2

<h3>A Header</h3>

上面的H3在.sectiontitle中，所以它被

捕获

$('.sectiontitle h3').toggle()

$('.sectiontitle h3')表示内容<{1}}的任何元素内的所有h3都将被切换：在文档加载时，切换会将它们全部隐藏起来。

＆＃13;

sectiontitle

＆＃13;

$(document).ready(function() {
 $('.entrysection').hide();
 $('.sectiontitle h3').toggle(
        function() {
           $(this).next('.entrysection').slideDown();
           $(this).addClass('close');
        },
        function() {
           $(this).next('.entrysection').fadeOut();
           $(this).removeClass('close');
      }
    ); // end toggle
}); // end ready

＆＃13;

FIX

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="sectiontitle">  
         <h3>A Header</h3>
            <div class="entrysection">
                <p>Some silly unimportant stuff</p>
            </div>
            </div>
<div class="sectiontitle">  
         <h3>Another Header</h3>
            <div class="entrysection">
                <p>Yet more unimportant stuff</p>
            </div>
            </div>
 <div class="sectiontitle"> 
         <h3>Yet Another Header</h3>
            <div class="entrysection">
                <p>The least important stuff yet</p>
            </div>
            </div>
</body>

＆＃13;

$(document).ready(function() {
  $('.entrysection').hide();

  $('.sectiontitle h3').on('click', function() {
      $('.sectiontitle h3').next('.entrysection').hide();
      
      $(this).next('.entrysection').show();
  });



}); // end ready

＆＃13;

Answer 3

         $(document).ready(function() {
				 $( ".sectiontitle h3" ).click(function( event ) {
				  var target = $( event.target );
				  if ( target.is( "h3" ) ) {
				  var par = target.parent();
					 par.children().find("p").toggle();
				  }
					
				});

}); // end ready

<!DOCTYPE html>
 <html>
    <head>
      <script      
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" 
>
      </script>
     <script>

</script>
</head>
<body>
<div class="sectiontitle">  
         <h3 >A Header</h3>
            <div class="entrysection">
                <p>Some silly unimportant stuff</p>
            </div>
            </div>
<div class="sectiontitle">  
         <h3 >Another Header</h3>
            <div class="entrysection">
                <p>Yet more unimportant stuff</p>
            </div>
            </div>
 <div class="sectiontitle"> 
         <h3 >Yet Another Header</h3>
            <div class="entrysection">
                <p>The least important stuff yet</p>
            </div>
            </div>
</body>
</html>

请尝试以上操作。它已经解决了

Answer 4

.toggle()函数本身隐藏了h3。在JQuery documentation page上，它说.toggle()执行此操作：

描述：显示或隐藏匹配的元素。

让它表现得像我想的那样。您只需在H3上添加一个点击处理程序，然后切换entrysection

$(document).ready(function() {
   $('.sectiontitle h3').click(function () {
      $(this).next('.entrysection').toggle('slow')
  });
});

Jquery .hide函数隐藏所选类之外的东西

4 个答案:

FIX