Question

我试图让我的按钮隐藏ul元素，但是似乎没有任何作用。测试警报工作正常，但hide事件无效。我检查了CSS选择器是否正确。

这是我当前的脚本：

jQuery(function($) {
  $(document).ready(function() {
    $(".trigger").on("click", function() {
      event.preventDefault();
      $(".b3_archive_testimonial_category_list").hide();
      alert("HI");
    });
  });
});

怪异地格式化它以使其适合StackOverflow上的代码元素...

Image of the element to hide

有什么想法吗？

Answer 1

假设.trigger是<a>标记，这就是使用event.preventDefault()的原因。在这种情况下，使用此事件方法将使页面在单击链接时不会跳转。

如果这实际上是原因，请通过event Object：

$(".trigger").on("click", function( 事件 ) {...
如果.trigger不是<a>标记，请删除event.preventDefault()。

此外，请打开此包装：

jQuery(function($) {...});

这是不必要的。

演示

$(".trigger").on("click", function(event) {
  event.preventDefault();
  $(".b3_archive_testimonial_category_list").hide();
});

<a href='#' class='trigger'>Trigger</a>
<ul class='b3_archive_testimonial_category_list'>
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您需要在函数中包括事件参数：

$(".trigger").on("click", function(event) {...}

现在您的代码应该可以使用了。

Answer 3

您可以使用jquery create trigger popmonthlyprem after insert on policycoverage for each row update policy.policymonthlypremium join on policy.policymonthlypremium = coverage.coveragemonthlyrate隐藏和显示元素单击事件中的项目。

toggle()

$(".trigger").on("click", function(event) {
  event.preventDefault();
  $(".b3_archive_testimonial_category_list").toggle();
});

Answer 4

根据您的一些回答找到了答案。

主要问题似乎与太多的CSS类有关，或者仅仅是我针对ul CSS类。我将其封装在div中，并使其显示和隐藏。这似乎是最好的。

第二，表明我尚未通过事件函数的响应是正确的：

$(".trigger").on("click", function(event) {...}

我当前的代码如下：

jQuery(document).ready(function() {
jQuery('.dropdown').hide();
jQuery('.trigger').click(function(e){
e.preventDefault();jQuery(".dropdown").slideToggle();
jQuery('.trigger').toggleClass('opened closed');
});
});

感谢大家的帮助！

Answer 5

根据您的问题，这里是答案。您必须包括jquery库文件才能运行代码。

jQuery(function($) {
  $(document).ready(function() {
    $(".trigger").on("click", function() {
      event.preventDefault();
      $(".b3_archive_testimonial_category_list").hide();
      alert("HI");
    });
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>


<button type="button" class="trigger">Click</button>

<ul class='b3_archive_testimonial_category_list'>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

</body>
</html>

简单的.hide Jquery脚本

5 个答案:

演示