Question

我有一个问题，现在已经好几天了。我的标题中有两个元素，徽标和“返回”按钮。

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

我设法在单击时正确移动了元素，但是在一个元素上display: none并没有改变，我很困惑为什么不这样做。

我希望下拉列表显示在单击的元素下方。因此，如果单击“徽标”，则下拉列表将移至“徽标”元素，并显示在徽标下方，如果单击“返回”，则下拉列表将移至“返回”元素并显示在该元素下。

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

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

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

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>

AppendTo（）元素，jQuery CSS类更改不起作用

1 个答案: