1

该类<li>通过单击来设置。现在嵌套元素 ( <button>) 不会从其父类中删除该类。

提前致谢。

$(document).ready(function() {
      $('.pickOne li').click(function() {
        $(this).addClass('active');
      });

      $('.settingsCancelBtn').click(function() {
        $(this).parent().parent().removeClass('active');
      });
    });

HTML是这样的：

<div class="fromCamp pickOne four">
                <ul class="four">
                    <li class="first bus"><a href="#" alt="By Bus"></a>
                        <div>
                            <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
                            <p><a href="#">Tilefishes</a></p>
                            <p><a href="#">Bluefishes</a></p>
                            <p><a href="#">Tigerfishes</a></p>
                            <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
                            <button class="cmGoButton settingsSaveBtn" type="button">Save</button>
                        </div>
                    </li>
                    <li class="second car"><a href="#" alt="By Car"></a>
                        <div>
                            <p><a href="#">Remoras</a></p>
                            <p><a href="#">Tilefishes</a></p>
                            <p><a href="#">Bluefishes</a></p>
                            <p><a href="#">Tigerfishes</a></p>
                            <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
                            <button class="cmGoButton settingsSaveBtn" type="button">Save</button>
                        </div>
                    </li>
                    <li class="third plane"><a href="#" alt="By Plane"></a>
                        <div>
                            <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
                            <p><a href="#">Tilefishes</a></p>
                            <p><a href="#">Bluefishes</a></p>
                            <p><a href="#">Tigerfishes</a></p>
                            <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
                            <button class="cmGoButton settingsSaveBtn" type="button">Save</button>
                        </div>
                    </li>
                    <li class="fourth stayOver"><a href="#" alt="Staying Over"></a>
                        <div>
                            <p><a href="#">Remoras</a></p>
                            <p><a href="#">Tilefishes</a></p>
                            <p><a href="#">Bluefishes</a></p>
                            <p><a href="#">Tigerfishes</a></p>
                            <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
                            <button class="cmGoButton settingsSaveBtn" type="button">Save</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="cmClear"></div>
        </div>
4

2 回答 2

5

好的，这是正在发生的事情：

因为您的按钮包含在 LI 中，所以当您单击该按钮时，它会删除该类，然后该事件会继续传播并重新应用该类。

所以它正在移除；它只是立即重新申请。所以添加

  // Dont forget to put the e in function()
  $('.settingsCancelBtn').click(function(e) {
    $(this).parent().parent().removeClass('active');

    // This is the new line!
    e.stopPropagation();
  });
于 2010-01-07T19:51:44.817 回答
0

因此，在我发布此消息几分钟后，我的好友提出了一个解决方案。断点……谁知道呢。:)

因为我最初选择的是<li>，所以当我单击它的一个子级以删除活动类时，它删除了它，然后立即再次添加它。

解决方案是最初选择<a>内部<li>（它设置为display:block并覆盖相同的空间li。）

傻我。

$(document).ready(function() {
      $('.pickOne li a ').click(function() {
        $(this).parent().addClass('active');
      });

      $('.settingsCancelBtn').click(function() {
        $(this).parent().parent().removeClass('active');
      });
    });
于 2010-01-07T19:50:47.923 回答