javascript - AppendTo() 元素，jQuery CSS 类更改不起作用

Question

我有一个问题，我几天都弄不明白。我的标题中有两个元素， Logo 和“返回”按钮。

现在，我希望这两个元素做完全相同的事情。单击时，显示相同的下拉菜单。我不想复制我的代码，所以我尝试移动元素并在点击时分配正确的类。

我成功地在点击时正确地移动了我的元素，但是在一个元素上 display: none 没有改变，我真的很困惑为什么不。

我希望下拉菜单显示在被单击的元素下方。因此，如果您单击“ Logo ”，下拉菜单将移至“ Logo ”元素并显示在 Logo 下方，如果单击“返回”，则下拉菜单将移至“返回”元素并出现在该元素下。

单击时，元素会发生变化，因此它们看起来完全相同，但是，display: none 属性不会在“返回”元素上发生变化。谁能告诉我为什么？

jQuery("#checkout-header-count").click(function() {
  jQuery("#checkout-header-logo").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-count").addClass("checkout-prepend-dropdown");
  jQuery(".checkout-prepend-dropdown-content").appendTo(jQuery("#checkout-header-count"));
});

jQuery("#checkout-header-logo").click(function() {
  jQuery("#checkout-header-count").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-logo").addClass("checkout-prepend-dropdown");
  jQuery(".checkout-prepend-dropdown-content").appendTo(jQuery("#checkout-header-logo"));
});

jQuery(".checkout-prepend-dropdown").click(function() {
  if (jQuery(".checkout-prepend-dropdown-content").css('display') == 'block') {
    jQuery(".checkout-prepend-dropdown-content").css("display", "none")
  } else if (jQuery(".checkout-prepend-dropdown-content").css('display') == 'none') {
    jQuery(".checkout-prepend-dropdown-content").css("display", "block");
  }
});

jQuery('.checkout-prepend-dropdown-content').click(function(e) {
  e.stopPropagation();
});
jQuery(".checkout-prepend-dropdown").click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  jQuery('.checkout-prepend-dropdown-content').show();
});
jQuery(document).click(function(e) {
  jQuery('.checkout-prepend-dropdown-content').hide();
});
jQuery("#returnCheckout").click(function() {
  jQuery('.checkout-prepend-dropdown-content').hide();
});

.checkout-prepend-dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #4E4D4D;
  color: white;
  left: -70px;
  padding: 10px;
  z-index: 20;
}

.checkout-prepend-dropdown-content>div {
  display: inline-block;
}

.checkout-prepend-dropdown-content>div>a {
  color: #9C2CA8;
}

.checkout-prepend-dropdown-content>div>a:hover {
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="checkout-prepend-wrapper">
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-logo" class="checkout-prepend-dropdown">
    <img src="/media/logo/stores/1/logo_vv.png" alt="Logo" />
    <div class="checkout-prepend-dropdown-content">
      <p>Warning! You are about to leave the checkout!</p>
      <div id="returnCheckout" class="vvButton">Return to checkout</div>
      <div class="vvButton"><a href="/checkout/cart">Go back to basket</a></div>
    </div>
  </div>
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-count">Go back</div>
</div>

Answer 1

然后您可以创建一个函数来执行您的流程逻辑并将其附加到两个按钮的点击事件，这样您将确保按钮将完成相同的工作:

jQuery("#checkout-header-count, #checkout-header-logo").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    toggleDropdown();
});

$(function() {
  jQuery("#checkout-header-count, #checkout-header-logo").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    toggleDropdown(this);
  });


  jQuery('.checkout-prepend-dropdown-content').click(function(e) {
    e.stopPropagation();
  });

  jQuery(document).click(function(e) {
    jQuery('.checkout-prepend-dropdown-content').hide();
  });
});

function toggleDropdown(clicked_element) {
  jQuery("#checkout-header-logo").removeClass("checkout-prepend-dropdown");
  jQuery("#checkout-header-count").addClass("checkout-prepend-dropdown");

  jQuery(".checkout-prepend-dropdown-content").appendTo($(clicked_element));

  if (jQuery(".checkout-prepend-dropdown-content").is(':visible')) {
    jQuery(".checkout-prepend-dropdown-content").hide();
  } else {
    jQuery(".checkout-prepend-dropdown-content").show();
  }
}

.checkout-prepend-dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #4E4D4D;
  color: white;
  padding: 10px;
  z-index: 20;
}

.checkout-prepend-dropdown-content>div {
  display: inline-block;
}

.checkout-prepend-dropdown-content>div>a {
  color: #9C2CA8;
}

.checkout-prepend-dropdown-content>div>a:hover {
  color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="checkout-prepend-wrapper">
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-logo" class="checkout-prepend-dropdown">
    <img src="/media/logo/stores/1/logo_vv.png" alt="Logo" />
    <div class="checkout-prepend-dropdown-content">
      <p>Warning! You are about to leave the checkout!</p>
      <div id="returnCheckout" class="vvButton">Return to checkout</div>
      <div class="vvButton"><a href="/checkout/cart">Go back to basket</a></div>
    </div>
  </div>
  <div style="display: inline-block; padding: 0 100px;" id="checkout-header-count">Go back
  </div>