Question

我有一个简单的向下滑动脚本，显示点击事件的div。我遇到的问题是，如果我将它包装在另一个div中，则onclick事件不起作用。如果可点击的div没有任何父div，则它可以正常工作。

我将它用于多个div，其中只有一个被打开。

我需要打开1才能工作

HTML

<div>
  <div class="clickMore">open 1</div>
</div>

<div class="clickMore">open 2</div>
<div class="showMore" style="display:none;">
  <div>text</div>
</div>

JS

 $(function() {
  $('.clickMore').on('click', function() {
    $('.showMore').not($(this).next('.showMore')).slideUp('fast');
    $(this).next('.showMore').slideToggle('fast');
  });
});

Answer 1

<强> Working fiddle

由于您遇到两种情况并且选择器require('/path/to/function_collection/pagination_functions.php');不会始终返回所需的结果，因此问题发生了，因为当$(this).next('.showMore') .clickMore内的div元素时.next()元素1}}函数找不到元素，因为它在当前div之外？

我的建议ID是添加一个条件，以确保相关的.showMore元素是否紧挨着点击的div，或者应该通过添加parent来定位：

$(function() {
  $('.clickMore').on('click', function() {
    if ($(this).next('.showMore').length) {
      var show_more = $(this).next('.showMore');
    } else {
      var show_more = $(this).parent().next('.showMore');
    }

    $('.showMore').not(show_more).slideUp('fast');
    show_more.slideToggle('fast');
  });
});

条件的简短版本可能是：

$(function() {
  $('.clickMore').on('click', function() {
    var show_more = $(this).next('.showMore');
    show_more = show_more.length > 0 ? show_more : $(this).parent().next('.showMore');

    $('.showMore').not(show_more).slideUp('fast');
    show_more.slideToggle('fast');
  });
});

Answer 2

试试这个

$(function() {
  $('.clickMore').on('click', function() {
    $('.showMore').slideToggle('fast');
  });
});

Answer 3

Working Fiddle

$(function() {
  $('.clickMore').on('click', function() {   
    $('.showMore').hide();
    var el = $(".showMore");    
    $(".showMore").remove();
    $(this).append(el);
    $('.showMore').slideToggle();
  });
});

您可以动态更改文字内容

在点击事件上向下滑动div

3 个答案: