javascript - 在 jQuery 中实现面板功能的 "Show/Hide"按钮有问题吗？

Question

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

这是我的代码片段: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

您的代码的第一个版本太复杂了。您还可以在显示功能中使用隐藏功能。

我试图为您的代码制作一个更简单的版本。检查一下:

$(".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>