Question

我需要一些帮助，当用户点击它时隐藏div并同时向下滑动隐藏div的内容。以下代码用于向下滑动隐藏的div。

    $(document).ready(function (){ $('.hide').hide();
    $('.main:has(".hide")').find('div.toggle').click(function() {
       var el = $(this).next('.hide'),
       check = (el.is(':visible')) ? el.slideUp() : ($('.hide').slideUp()) (el.slideDown());
    });

    });

上面的例子是here，this link有完整的标记和一些实验，我试图隐藏阅读更多的div，但它隐藏了每个div。如果有人会帮我解释上面的其他简写声明。

谢谢大家，我的疑问已经解决了：）

Answer 1

我认为您需要学习的是如何使用this。 this是一个引用您点击的元素的关键字。因此，您可以执行$(this).hide()或删除（），或切换（）或任何您想要的操作。

http://jsbin.com/awirap/5/edit

JQuery this

编辑：要在单击另一个时显示更多内容，您将执行以下操作：

$('.toggle').show();

您展示了所有这些代码，然后在这段代码之后，您$(this).hide();只隐藏您点击过的代码。

Answer 2

这是一种更简单的方法。

$(document).ready(function(){
  $('.toggle').click(function(){
    $(this).hide();
    $(this).next('div').slideToggle();
  });
});

简写if / else语句称为三元运算符。您的代码表示如果带有附加文本的div可见，则将其向上滑动（隐藏），否则将其向下滑动（显示）。但是后面的部分：可能不应该有（$（'。hide'）。slideUp（））

Answer 3

将此代码替换为现有脚本

$(document).ready(function (){
       $('.hide').hide();
       $('.main:has(".hide")').find('div.toggle').click(function() {
           $(".toggle").show();
           $(this).hide();
           var el = $(this).next('.hide');
           var check = (el.is(':visible')) ? el.slideUp() : ($('.hide').slideUp()) (el.slideDown());
       });

});

Answer 4

我想你想要这个：http://jsbin.com/awirap/6/edit

$(document).ready(function (){
   $('.hide').hide();
   $('.main').find('div.toggle').click(function() {
       if ($('.hide').css("display") == 'none') {
          $('div.toggle',this).addClass("hidden").next().addClass("show");
       } else {    //---------------------------------^^---missed the parentheses
          $('div.toggle').show();
       }
       var el = $(this).next('.hide'),
       check = (el.is(':visible')) ? el.slideUp() : ($('.hide').slideUp()) (el.slideDown());
   });
});

if someone would help me explain the above if else shorthand statement.

(condition) ? if true : if false

隐藏阅读更多div /按钮/文本

4 个答案: