Question

这是简单的显示和隐藏在javascript中的方法。如果将单击按钮放在div框上方，则脚本会起作用，但是如果将其放在div框的下方则不会。

我如何做到这样

<div class="box">
    <ul>
      <li>
        Phones
      </li>
      <li>
        TV
      </li>
    </ul>
</div>
<a href="#" class="clickme">Show</a>

$('.box').hide();

$('.clickme').each(function() {
  $(this).show(0).on('click', function(e) {
    e.preventDefault();
    $(this).next('.box').slideToggle('fast', function() {
      $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
    });
  });
});

Here's the DEMO

Answer 1

当您单击的元素（a）在div下时，它无法检测到next()。请改用siblings()。

更改

$(this).next('.box').slideToggle('fast', function() {

收件人

$(this).siblings('.box').slideToggle('fast', function() {

$('.clickme').each(function() { 
  $(this).show(0).on('click', function(e) { 
    e.preventDefault(); 
    $(this).siblings('.box').slideToggle('fast', function() {
        $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show'); 
    }); 
  }); 
});

body {
    font: 12px/16px sans-serif;
    margin: 10px;
    padding: 0;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clickme {
    background-color: #eee;
    border-radius: 4px;
    color: #666;
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-decoration: none;
}

.clickme:hover {
    text-decoration: underline;
}

.box {
    background-color: #ccc;
    border-radius: 4px;
    color: #333;
    margin: 5px 0;
    padding: 5px 10px;
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <ul>
    <li>
      Phones
    </li>
    <li>
      TV
    </li>
  </ul>
</div>
<a href="#" class="clickme">Show</a>

Answer 2

您用box类调用下一个元素，但是如果将其放在列表下方，则它们不是按钮后的box类。只需通过调用其类即可引用该列表：

$('.box').slideToggle('fast', function() {
  $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show');
});

希望这会有所帮助；

Answer 3

$.next()返回紧随其后的兄弟姐妹，因此您不能在这种情况下使用它。您可以尝试$ .siblings（）或$ .prev（）

$('.box').hide(); 
$('.clickme').each(function() { 
$(this).show(0).on('click', function(e) { e.preventDefault(); $(this).siblings('.box').slideToggle('fast', function() { $(this).prev().html($(this).is(':visible') ? 'Hide' : 'Show'); }); 
}); 
});

body {
    font: 12px/16px sans-serif;
    margin: 10px;
    padding: 0;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clickme {
    background-color: #eee;
    border-radius: 4px;
    color: #666;
    display: block;
    margin-bottom: 5px;
    padding: 5px 10px;
    text-decoration: none;
}

.clickme:hover {
    text-decoration: underline;
}

.box {
    background-color: #ccc;
    border-radius: 4px;
    color: #333;
    margin: 5px 0;
    padding: 5px 10px;
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    <ul>
      <li>
		Phones
      </li>
	  <li>
	    TV
	  </li>
    </ul>
</div>
<a href="#" class="clickme">Show</a>

说明：获取紧随其后的每个元素的同级元素匹配元素的集合。如果提供了选择器，它将检索仅当下一个同级匹配该选择器时

如果将按钮置于框元素下方，则切换按钮不起作用

3 个答案: