Question

我已在我的应用程序中成功开发了切换功能。然而，在关闭的身体内，我有一个“关闭”按钮，我试图隐藏身体..

这是我的.HTML：

<div class="toggle_head inputHeader">
<label>
    <img src="images/expand.png" />
</label>
<label>Step 1 >> More Info 1</label>
</div>
<div class="toggle_body more-info-statment">
<ul class="list">
    <li>
        <label class="more-info-title">More Info Statement<span><button type="button" class="btn btn--close toggle_head" style="float:right;">Close</button></span>

        </label>
    </li>
    <li>
        <label class="more-info-text">"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. .</label>
    </li>
</ul>
</div>

这是我的jQuery：

$(".toggle_body").hide();

$(".toggle_head").click(function() {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function() {
      $this.children('img').toggle();
    });
});

这是我的小提琴：http://jsfiddle.net/oampz/EvHZD/2/

正如您所看到的，我想要实现的是，当用户点击“关闭”按钮时，切换主体会再次隐藏。

任何帮助表示感谢。

Answer 1

将其添加到代码：

$(".btn").click(function() {
        var $this = $(this);
        $this.closest(".toggle_body").slideUp();
    });

的jsfiddle＆GT; http://jsfiddle.net/EvHZD/3/

Answer 2

如果您希望它像关闭按钮一样，而不是向上滑动，请使用.toggle（）

$(".btn").click(function() {
    var $this = $(this);
    $this.closest(".toggle_body").toggle();
});

Answer 3

希望以下代码可以帮助您完成您想要做的事情。我只是重构了你的代码。

var sectionHead = $(".toggle_head");
var sectionBody = $(".toggle_body");
var sectionBodyCloseButton = $(".toggle_body button.btn--close");

sectionBody.hide();
sectionHead.click(function() {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function() {
      $this.children('img').toggle();
    });
});

sectionBodyCloseButton.click(function() {
    var $this = $(this);
    $this.closest(".toggle_body").slideToggle("slow", function() {
      $this.children('img').toggle();
    });
});

jQuery - 在Toggle中切换

3 个答案: