Question

如何使用相同的链接隐藏和显示div（并更改另一个div的宽度），例如我可以显示一个div并更改其widht。我怎样才能做到这一点，如果用户再次点击，宽度将返回600px，右边的div将被隐藏。

 $("a").click(function(event){
         $('#main-content').width(800);
         $('#right').show('slow').slideDown('slow');
         event.preventDefault();
       });

修改在你的回复中，我做到了这一点：

 $(document).ready(function(){
   $('#right').hide();
   $('#main-content').width(600);

   $('#show-stats').toggle(function() {
         $('#main-content').width(800);
         $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
         $('#right').show('slow').slideDown('slow').fadeIn('slow');
         event.preventDefault();

    }, function() {
         $('#main-content').width(600);
         $(this).text($(this).text() == 'Hide' ? 'Show' : 'Hide');
         $('#right').hide('slow').slideUp('slow').fadeOut('slow'); // change the text
         event.preventDefault();
});



 });

这会破坏互联网吗？有更优雅的方式还是这样好？

Answer 1

您可以使用.toggle()

一个小例子：

$("a").toggle(
    function() {
        $('#main-content').width(800);
        $('#right').show('slow').slidedown('slow');
    },
    function() {
        $('#main-content').width(600);
        $('#right').hide();
    }
);

Answer 2

您需要使用toggle pseudo-event handler。这接受多个函数定义作为其参数并依次调用它们，因此，给定两个参数，第一个调用将调用第一个函数，第二个调用第二个函数，第三个调用第一个函数，等等...

$('a').toggle(function(event){
    $('#main-content').width(800);
    $('#right').show('slow').slideDown('slow');
    event.preventDefault();
}, function(event) {
    $('#main-content').width(600);
    $('#right').slideUp('slow').hide('slow');
    event.preventDefault();
});

显示和隐藏在jquery中

2 个答案: