Jquery 将切换与关闭按钮相结合答案

【问题标题】：Jquery combine toggle with a close buttonJquery 将切换与关闭按钮相结合
【发布时间】：2013-06-05 15:40:58
【问题描述】：

我想实现一些目标，但令人惊讶的是无法在网上找到任何代码。 jquery 切换功能很棒，但我还想将它与展开的 div 内的“关闭”按钮结合起来。这样，您可以使用外部按钮将其打开，但内部也可以使用“关闭”按钮将其关闭。下面显示了我没有成功的尝试：

这是我开始使用的切换代码： http://jsfiddle.net/uhEgG/

$(document).ready(function(){

$("#country_slide").hide();
$("#country").show();

$('#country').click(function(){
$("#country_slide").slideToggle();
});
});

我想我需要一个按钮来做这样的事情：

$('#close').click(function() {
  $('#country_slide').hide('slow', function() {
  });
});

【问题讨论】：

好吧，你已经把 JS 代码写下来了，所以唯一剩下的就是 HTML。

标签： javascript jquery

【解决方案1】：

这是一个工作版本：http://jsfiddle.net/uhEgG/2/ - Javascript 是：

$(document).ready(function(){  
    $('#country').click(function () {
        $("#country_slide").slideToggle();
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });
});

我更新了 HTML：

<div id="country_slide">test<a href="#" id="close">Close</a></div>

【讨论】：

【解决方案2】：

在“#county_slide”中创建一个按钮

$('#btnClose').click(function (e) {
    e.preventDefault();
    $('#country_slide').slideToggle();
});

【讨论】：

【解决方案3】：

您可以简单地将slideUp 用于关闭和slideDown 用于打开
查看fiddle

 $('#country').click(function () {
    $("#country_slide").slideDown();
});

$('#close').click(function () {
   $('#country_slide').slideUp();
});

【讨论】：