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>

main.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');
        });
    });
});

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

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

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

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

编辑我找到了解决方案。我仍然不确定为什么上面的错误，或者为什么将隐藏部分放在脚本之外是错误的（我是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>

Answer 2

这是一种可行的手风琴方式。我使用toggleClass并将max-height设置为＆＃34;有效＆＃34;类。动画是用CSS制作的。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: