Question

需要快速帮助（提前谢谢）。我有一个简单的clkick事件（见下文）

document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours:
$(document).ready(function() {
  $(".reply").click(function() {
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    //don't follow the link (optional, seen as the link is just an anchor)
    return false;
  });
});

我的HTML是：

<div class="form-row" id="living">
  <span><a class="reply2" href="#list2">Dining Room</a></span>
  <label id="list2">
    <span>Dining Table - 6 persons</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Dining Table - 8/10 persons</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Dining Chairs</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Cabinet Dresser</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Display Unit</span>
    <input type="checkbox" name="checkbox" checked>
    <br />
    <span>Rug</span>
    <input type="checkbox" name="checkbox" checked>
  </label>
</div>

我的问题是：当我刷新页面时，如何阻止我的Jquery加载，因为它会在页面加载时显示清单标记。感谢您的支持。

Answer 1

你不必阻止Jquery加载...如果我理解你正确的话，那么你想要的就是在加载时隐藏清单（初始）。你可以用一些CSS来做到这一点：

#list1 {
    display : none;
}

$(document).ready(function () {
  $(".reply").click(function () {
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    //don't follow the link (optional, seen as the link is just an anchor)
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#list1 {
  display : none;
}
</style>
    <div class="form-row" id="living">
      <span><a class="reply" href="#list2">Dining Room</a></span>
      <label id="list1">
        <span>Dining Table - 6 persons</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Dining Table - 8/10 persons</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Dining Chairs</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Cabinet Dresser</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Display Unit</span>
        <input type="checkbox" name="checkbox" checked>
        <br />
        <span>Rug</span>
        <input type="checkbox" name="checkbox" checked>
      </label>
    </div>

Answer 2

这是解决方案（使用preventDefault（））：

document.documentElement.className = 'js';
//add the jQuery click/show/hide behaviours:
$(document).ready(function() {
  $(".reply").click(function(e) {
    e.preventDefault();
    if ($("#list1").is(":visible")) {
      $("#list1").hide();
    } else {
      $("#list1").show();
    }
    return false;
  });
});

现在您的链接不会将您引导至主题标签。变化：只需添加＆＃34; e＆＃34;到.click（函数（ e ））然后使用＆＃34; e＆＃34;的方法 - e。 preventDefault（）;

刷新页面时如何防止点击事件加载

2 个答案: