在 jQuery 中为面板功能实现“显示/隐藏”按钮时出现问题？

Question

我正在做一个博客网站。在此页面中，我希望它有多个博客条目，并且我希望用户能够按下“显示”按钮将面板向下滑动并显示特定的博客条目。之后，按钮将使用 jQuery 更改为“隐藏”。然后，如果用户单击“隐藏”按钮，博客条目将向上滑动并再次隐藏。多个博客条目应该能够同时显示（或隐藏）。

这是我的代码的 sn-p： stories.html

            <div style="width:100%;">
                <div class="panel-header" rel="blog-panel1">
                    <h2>Blog Title #1</h2>
                    <button type="button">Show</button>
                    <h4>Date #1</h4>
                </div>
                <div class="panel" id="blog-panel1" >
                    <p>Some Paragraph #1</p>
                </div>
                <div class="panel-header" rel="blog-panel2">
                    <h2>Blog Title #2</h2>
                    <button type="button">Show</button>
                    <h4>Date #2</h4>
                </div>
                <div class="panel" id="blog-panel2">
                    <p>Some Paragraph #2</p>
                </div>
            </div>

ma​​in.js

$(function () {
    $(".panel-header button:contains('Show')").on("click", function() {
        //show
        $(this).text("Hide");

        var panelToShow = $(this).parent().attr('rel');

        $('#'+panelToShow).slideDown(300, function() {
            $(this).addClass('active');
        });
        //hide
        $(".panel-header button:contains('Hide')").on("click", function() {
            $(this).text("Show");

            var panelToHide = $(this).parent().attr('rel');

            $('#'+panelToHide).slideUp(300, function() {
                $(this).removeClass('active');
        });
    });
});

在我的 ma​​in.css 文件中，.panel 设置为 display: none，.panel.active 设置为 display: block。

我已经尝试将 JavaScript 的隐藏部分放在回调之外。但是，它不起作用（即它只能显示博客条目但无法隐藏它）。

对于这个，它能够显示和隐藏博客条目，但只能显示一次。之后，它开始做一些奇怪的事情。单击“显示”按钮后，它会向下滑动，然后立即向上滑动。

非常感谢任何形式的帮助！

编辑我找到了解决方案。我仍然不确定为什么上面是错误的，或者为什么将隐藏部分放在脚本之外是错误的（我是 JS/jQuery 的新手）如果有人仍然可以向我解释，那就太好了。但是下面的代码有效。我只是添加了一个简单的 if/else 语句。

$(".panel-header button").on("click", function() {
        if ($(this).text() == "Show") {
            $(this).text("Hide");

            var panelToShow = $(this).parent().attr('rel');

            $('#'+panelToShow).slideDown(300, function() {
                $(this).addClass('active');
            });
        }
        else {
            $(this).text("Show");

            var panelToHide = $(this).parent().attr('rel');

            $('#'+panelToHide).slideUp(300, function() {
                $(this).removeClass('active');
            });
        }

    });

Answer 1

您的代码的第一个版本太复杂了。此外，您还拥有 Show 功能中的 Hide 功能。

我尝试为您的代码制作一个更简单的版本。看看吧：

$(".panel-header button").on("click", function() {
	// We'll save this jQuery selection on a variable
	// since we'll use it more than once.
  // This helps the performance of our script,
  // because jQuery will only look for the element once.
	var $this = $(this);
  
  // This is a ternary if. Just like a regular if but smaller.
  // Perfect to assign different values to the same variable
  // in different situations
	var btnText = ($this.text() === 'Show') ? 'Hide' : 'Show';

	$this
  	.text(btnText)
  	.parent()
    .next('.panel')
    .slideToggle();
});

.container {
  width: 100%;
}

h2,
h4 {
  margin: 5px;  
}

.panel-header {
  background: grey;
}

.panel-header {
  background: grey;
  margin-bottom: 10px;
  overflow: hidden;
}

.panel-header h2 {
  float: left;
}

.panel-header h4,
.panel-header button{
  float: right;
}

.panel-header h2 {
  float: left;
}

.panel {
  display: none;
}

.panel p {
  margin: 0;
  padding: 0 10px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="panel-header">
    <h2>Blog Title #1</h2>
    <button type="button">Show</button>
    <h4>Date #1</h4>
  </div>
  <div class="panel">
    <p>Some Paragraph #1</p>
  </div>
  <div class="panel-header">
    <h2>Blog Title #2</h2>
    <button type="button">Show</button>
    <h4>Date #2</h4>
  </div>
  <div class="panel">
    <p>Some Paragraph #2</p>
  </div>
</div>

Answer 2

这是一种制作手风琴的可能方法。我使用toggleClass 并将max-height 设置为“活动”类。并且动画是在 CSS 中的。

$('.panel-header').click(function(){
  $(this).parent().toggleClass('active');
});

.panel {
  margin-bottom: 30px;
}

.panel-content {
  max-height: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

.active .panel-content {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul style="width:100%;">
  <li class="panel" rel="blog-panel1">
    <div class="panel-header">
      <h2>Blog Title #1</h2>
      <button class="button" type="button">Show</button>
      <h4>Date #1</h4>
    </div>
		
		<div class="panel-content" id="blog-panel1" >
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
	  </div>
  </li>

  <li class="panel" rel="blog-panel2">
    <div class="panel-header">
      <h2>Blog Title #2</h2>
      <button class="button" type="button">Show</button>
      <h4>Date #2</h4>
    </div>

		<div class="panel-content" id="blog-panel2">
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
	  </div>
  </li>
</ul>