Question

我有以下HTML代码：

<form action="" name = "myform" method = "post"> 
   <div id= "button">myButton</div>
   <div id="submit"><input type="submit" name = "submit" value="update"></div>
   <div class = "hiddenMenu" >
      <div id = "checkboxes">
          <input  type="checkbox" name="checkbox1">Checkbox1
          <input  type="checkbox" name="checkbox2">Checkbox2
      </div>
   </div>
</form>

相应的Jquery代码：

jQuery(document).ready(function($)
{
  jQuery("#button").click(function()
     {
        jQuery(".hiddenMenu").slideDown();
     });    
});

所有这一切都是当用户按下“按钮”时 - 带有复选框的“hiddenMenu”向下滑动。这很好用，但问题是当我按下“提交”按钮 - 页面重新加载和“hiddenMenu”消失时，我必须再次按“按钮”使“hiddenMenu”再次可见。如何在重新加载后阻止此菜单向上滑动？这样一旦按下按钮，菜单就会向下滑动，甚至在重新加载后它仍然可见？我认为这与“return false”有关，但我不知道在哪里发表这个声明。另一个问题是如何修改jquery以便这个菜单再次滑动的唯一时间是当我再次按下“按钮”时？

非常感谢，

Answer 1

您可以使用查询参数并在文档就绪事件中进行检查，以查看菜单是否应处于向下位置。如果它应该，那么只需执行你的功能将其置于向下位置。

Answer 2

您可以在文档就绪活动中 trigger 按钮点击事件。

$('#button').trigger('click');

否则您可以设置类似

的样式

display: block;

用于菜单元素。

您可以使用slideToggle方法在单击按钮时向上滑动并向下滑动菜单。

jQuery(document).ready(function($)
{
  jQuery("#button").click(function()
     {
        jQuery(".hiddenMenu").slideToggle();
     });    
});

Answer 3

通过单击按钮，您将触发要在页面刷新时保持的状态更改（这实际上是页面转换）。这意味着服务器必须知道它。因此，状态更改需要传达给服务器，以便它可以生成正确状态的页面，也可以生成正确的Javascript来显示或隐藏正确的内容。

您正在提交页面并希望保留菜单已打开。最简单的方法是通过一个表单来传达菜单是可见的。它由服务器读取并解释，因此响应仍然可见。如下所示：

<form action="" name = "myform" method = "post"> 
  <div id= "button">myButton</div>
  <input type="checkbox" name="hiddenMenu" id="hiddenMenu">
  <div id="submit"><input type="submit" name = "submit" value="update"></div>
  <div class = "hiddenMenu" >
    <div id = "checkboxes">
      <input  type="checkbox" name="checkbox1">Checkbox1
      <input  type="checkbox" name="checkbox2">Checkbox2
    </div>
  </div>
</form>

和

#hiddenMenu { display: none; }

和

$(function() {
  $("#button").click(function() {
    var cb = $("#hiddenMenu");
    if (cb.is(":checked")) {
      cb.removeAttr("checked");
      $("div.hiddenMenu").stop().slideUp();
    } else {
      cb.attr("checked", true);
      $("div.hiddenMenu").stop().slideDown();
    }
  });
});

现在服务器可以读取该复选框并采取相应的行动。

Answer 4

如果你正在使用PHP，你可以像提交表单时那样做：

$_SESSION['form'] = 'complete';

if(isset($_SESSION['form'])){

echo 'jQuery(".hiddenMenu").slideToggle();';

}

将写入正确的jquery但只有在他们提交了表单并且你设置了一个会话变量来表明他们已经这样做了。

Answer 5

如果你有jQuery cookie plugin，可以使用：

if($.cookie("menu_opened")) {
    $(".hiddenMenu").show();
}

...按钮会显示以下代码：

$("#button").click(function() {
    $.cookie("menu_opened", "true");
    $(".hiddenMenu").slideDown();
});

如何在重新加载页面jQuery之后保持div菜单滑落

5 个答案: