如果被点击，如何防止.slideup <a> ？(注意： <a> 用于 .load html)

Question

我想编辑(脚本 1(，以便在单击.dropdown-container内的链接时，导航不会向上滑动。我无法使用e.stopPropagation();因为它破坏了用于通过这些链接将外部 html 内容加载到div 中的脚本 2。

// script 1
$(document).ready(function() {
  $(".dropdown-button").click(function() {
    
    var childCointainer = $(this).find('.dropdown-container');
    $(".dropdown-container").not(childCointainer).slideUp('slow');
    childCointainer.slideToggle('slow');
    
  });
});
// script 2
$(document).on("click", "a.dynamic-loading", function (e) {
  e.preventDefault();
  var url = $(this).attr("href");
  $('#ajax').load(url + " #ajax>*");
});

nav .dropdown-button {padding:10px 12px; font-size:12px; border-bottom:1px solid #DEDEDE; cursor:pointer;}
nav .dropdown-button a {display:block; color:#737373;}
nav .dropdown-button a:hover, main > nav .dropdown-button a:focus {color:#333;}
nav .dropdown-button.active {background:#FFF;}
nav .dropdown-button.active > a {color:#222;}
nav .category {text-transform:uppercase;}
nav .subset {margin:12px 10px 0; padding:3px 0; color:#444; text-transform:uppercase; border-bottom:1px solid #DEDEDE; cursor:help; display:block;}
nav .subject {padding:8px 10px 0;}
nav .subject + .subject {padding-top:5px;}
nav .dropdown-container {display:none;}
nav .dropdown-container.stacked {margin-bottom:5px;}
#ajax {background:black; width:500px; height:200px; margin:50px 0 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="dropdown-button active">
    <a href="." class="category">Home</a>
  </div>
  <div class="dropdown-button">
    <a class="category">A</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">B</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">C</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
</nav>
<section id="ajax">
  <!-- external html is loaded here -->
</section>

Answer 1

检查单击的元素是否具有类 subject ，如果是，则返回。

// script 1
$(document).ready(function() {
  $(".dropdown-button").click(function(e) {
    var childCointainer = $(this).find('.dropdown-container');
    $(".dropdown-container").not(childCointainer).slideUp('slow');
    if (e.target.classList.contains('subject')) return; // <-- 
    childCointainer.slideToggle('slow');
  });
});
// script 2
$(document).on("click", "a.dynamic-loading", function(e) {
  e.preventDefault();
  var url = $(this).attr("href");
  $('#ajax').load(url + " #ajax>*");
});

nav .dropdown-button {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid #DEDEDE;
  cursor: pointer;
}
nav .dropdown-button a {
  display: block;
  color: #737373;
}
nav .dropdown-button a:hover,
main>nav .dropdown-button a:focus {
  color: #333;
}
nav .dropdown-button.active {
  background: #FFF;
}
nav .dropdown-button.active>a {
  color: #222;
}
nav .category {
  text-transform: uppercase;
}
nav .subset {
  margin: 12px 10px 0;
  padding: 3px 0;
  color: #444;
  text-transform: uppercase;
  border-bottom: 1px solid #DEDEDE;
  cursor: help;
  display: block;
}
nav .subject {
  padding: 8px 10px 0;
}
nav .subject+.subject {
  padding-top: 5px;
}
nav .dropdown-container {
  display: none;
}
nav .dropdown-container.stacked {
  margin-bottom: 5px;
}
#ajax {
  background: black;
  width: 500px;
  height: 200px;
  margin: 50px 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="dropdown-button active">
    <a href="." class="category">Home</a>
  </div>
  <div class="dropdown-button">
    <a class="category">A</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">B</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">C</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
</nav>
<section id="ajax">
  <!-- external html is loaded here -->
</section>

如果除了 subject 之外还有其他类名，您可以检查点击的元素是否anchor标签并且它是否嵌套在类 .dropdown-container 下。

// script 1
$(document).ready(function() {
  $(".dropdown-button").click(function({
    target
  }) {
    var childCointainer = $(this).find('.dropdown-container');
    $(".dropdown-container").not(childCointainer).slideUp('slow');
    if (target.tagName == 'A' && target.closest('.dropdown-container')) return;
    childCointainer.slideToggle('slow');
  });
});
// script 2
$(document).on("click", "a.dynamic-loading", function(e) {
  e.preventDefault();
  var url = $(this).attr("href");
  $('#ajax').load(url + " #ajax>*");
});

nav .dropdown-button {
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid #DEDEDE;
  cursor: pointer;
}
nav .dropdown-button a {
  display: block;
  color: #737373;
}
nav .dropdown-button a:hover,
main>nav .dropdown-button a:focus {
  color: #333;
}
nav .dropdown-button.active {
  background: #FFF;
}
nav .dropdown-button.active>a {
  color: #222;
}
nav .category {
  text-transform: uppercase;
}
nav .subset {
  margin: 12px 10px 0;
  padding: 3px 0;
  color: #444;
  text-transform: uppercase;
  border-bottom: 1px solid #DEDEDE;
  cursor: help;
  display: block;
}
nav .subject {
  padding: 8px 10px 0;
}
nav .subject+.subject {
  padding-top: 5px;
}
nav .dropdown-container {
  display: none;
}
nav .dropdown-container.stacked {
  margin-bottom: 5px;
}
#ajax {
  background: black;
  width: 500px;
  height: 200px;
  margin: 50px 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="dropdown-button active">
    <a href="." class="category">Home</a>
  </div>
  <div class="dropdown-button">
    <a class="category">A</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">B</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
  <div class="dropdown-button">
    <a class="category">C</a>
    <div class="dropdown-container">
      <a class="subject dynamic-loading" href="#">subject 1</a>
      <a class="subject dynamic-loading" href="#">subject 2</a>
      <a class="subject dynamic-loading" href="#">subject 3</a>
    </div>
  </div>
</nav>
<section id="ajax">
  <!-- external html is loaded here -->
</section>