javascript - 如果将按钮放在框元素下方，则切换按钮不起作用

这是简单的显示和隐藏在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

最佳答案

当您单击的元素（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>