javascript - Jquery 将切换与关闭按钮相结合

Question

我想实现一些目标，但令人惊讶的是无法在线找到任何代码。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() {
  });
});

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

Answer 2

您可以简单地使用slideUp关闭和slideDown打开检查小提琴

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

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

Answer 3

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

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