Question

在我的Contact页面上，我有一个显示电子邮件表单的链接，现在只是一个标题。我想要在点击不同的“页面”时隐藏电子邮件表单;但是，现在需要两次点击才能摆脱表格。该表单应仅在Contact Page上可见。我做了一个小测试用例来说明问题。

我的代码有效，但只有在您点击两次菜单后才能使用。我需要帮助才能制作它，所以我点击一次链接就会消失。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
    $("nav ul li").on("click", "a",
        function(){
                    if ($("#contact").is(":hidden")) {  
                        $(".contact_form").slideUp().hide();
                    };
            $("div.main").slideUp();
            $("div" + $(this).attr("href")).slideToggle().show().end();

            event.preventDefault();
        });

    $("#email_link").click(
        function(){
            $(".contact_form").slideToggle();
            event.preventDefault();
        });
        });
</script>
</head>
<body>
<div id="container">
<nav>
  <ul>
    <li><a href="#home"         id="link_to_home">Home</a></li>
    <li><a href="#about"        id="link_to_about"><span class="word_space">About Us</span></a></li>
    <li><a href="#contact"      id="link_to_contact"><span class="word_space">Contact Us</span></a></li>
    <li><a href="#cuts"         id="lik_to_cuts">Cuts</a></li>
  </ul>
</nav>
<hr>
<div class="content">
  <div class="main" id="home">
    <h1>Home</h1>
  </div>
  <div class="main" id="contact">
    <a href="#contact_form" id="email_link" class="email">Email Us</a>
  </div>
  <div class="contact_form">
    <h1>Contact Form</h1>
  </div>
  <div class="main" id="cuts">
    <h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
  </div>
</div>
</div>
</body>
</html>

Answer 1

你必须在你的HTML中改变一点只需在联系人div中移动contact_form div 让代码像这样

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("nav ul li").on("click", "a",
        function(){
                    if ($("#contact").is(":hidden")) {  
                        $(".contact_form").slideUp().hide();
                    };
            $("div.main").slideUp();
            $("div" + $(this).attr("href")).slideToggle().show().end();

            event.preventDefault();
        });

    $("#email_link").click(
        function(){
            $(".contact_form").slideToggle();
            event.preventDefault();
        });
        });
</script>
</head>
<body>
<div id="container">
<nav>
  <ul>
    <li><a href="#home"         id="link_to_home">Home</a></li>
    <li><a href="#about"        id="link_to_about"><span class="word_space">About Us</span></a></li>
    <li><a href="#contact"      id="link_to_contact"><span class="word_space">Contact Us</span></a></li>
    <li><a href="#cuts"         id="lik_to_cuts">Cuts</a></li>
  </ul>
</nav>
<hr>
<div class="content">
  <div class="main" id="home">
    <h1>Home</h1>
  </div>
  <div class="main" id="contact">
    <a href="#contact_form" id="email_link" class="email">Email Us</a>
    <div class="contact_form">
        <h1>Contact Form</h1>
    </div>
  </div>

  <div class="main" id="cuts">
    <h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
  </div>
</div>
</div>
</body>
</html>

然后从你的jquery中删除if语句

<script>
$(document).ready(function(){
    $("nav ul li").on("click", "a",
        function(){
            $(".contact_form").slideUp().hide();
            $("div.main").slideUp();
            $("div" + $(this).attr("href")).slideToggle().show().end();

            event.preventDefault();
        });

    $("#email_link").click(
        function(){
            $(".contact_form").slideToggle();
            event.preventDefault();
        });
        });
</script>

Answer 2

is(':visible')检查元素的display属性，您可以使用css方法。

//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
   $(".contact_form").slideUp().hide();
}

JQuery |通过菜单栏进行两次点击以隐藏Div标签

2 个答案: