如果<a>被点击，如何防止.slideup？(注意：<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之外还有不同的className，可以检查点击的元素是否为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>

​