jQuery DOM 遍历而不重新加载页面

jQuery DOM traversal without reloading the page

本文关键字：加载 新加载 遍历 DOM jQuery      更新时间：2023-09-26

我正在尝试放置一个div，在DOM中向上遍历，使用jQuery的.insertAfter()方法进行单击事件。除了事件触发时页面重新加载之外，一切正常。

$(document).ready(function() {
  $('.sidebar_menu_resp_gift a').click(function(event) {
    $('.sidebar').insertAfter('.sidebar_menu_resp_gift');
    event.preventDefault();
    $('.sidebar .side_box_1').slideToggle();
  });
  $('.sidebar_menu_resp_occassion a').click(function(event) {
    $('.sidebar').insertAfter('.sidebar_menu_resp_occassion');
    event.preventDefault();
    $('.sidebar .side_box_2').slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="sidebar_menu_resp_gift">
    <a href="#">Menu 1</a>
  </div>
  <div class="sidebar_menu_resp_occassion">
    <a href="#">Menu 2</a>
  </div>
  <div class="sidebar">
    <div class="side_box_1">
      <ul>
        <li>something 1</li>
        <li>something 2</li>
        <li>something 3</li>
        <li>something 4</li>
      </ul>
    </div>
    <div class="side_box_2">
      <ul>
        <li>something 5</li>
        <li>something 6</li>
        <li>something 7</li>
        <li>something 8</li>
      </ul>
    </div>
  </div>
</div>

我真正想要实现的是，当点击（.sidebar_menu_resp_gift a）时，必须立即向下滑动（.side_box_1）在它下面推动下面的所有东西。 同样，在（.sidebar_menu_resp_occassion a）的情况下，（.side_box_2）也必须下降到它下面。但是我side_boxdiv的下拉菜单，它实际上在HTML中。所以我决定使用.insertAfter().但它在单击事件时重新加载页面。有什么出路吗？

提前致谢

你应该使用 .live（） 或 .on（） 而不是 .click（）;

我会这样写：

$(document).ready(function(){
    $('.sidebar_menu_resp_gift').on('click','a',function(event){
        event.preventDefault();
        $(this).next().slideToggle();
    });
    $('.sidebar_menu_resp_occassion').on('click','a',function(event){
        event.preventDefault();
        $(this).next().slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="sidebar_menu_resp_gift">
    <a href="#">Menu 1</a>
    <div class="side_box_1">
        <ul>
            <li>something 1</li>
            <li>something 2</li>
            <li>something 3</li>
            <li>something 4</li>
        </ul>
    </div>
</div>
<div class="sidebar_menu_resp_occassion">
    <a href="#">Menu 2</a>
    <div class="side_box_2">
        <ul>
            <li>something 5</li>
            <li>something 6</li>
            <li>something 7</li>
            <li>something 8</li>
        </ul>
    </div>
</div>

相关文章：