JQuery |需要兩次點擊才能通過菜單欄隱藏Div標籤

在我的Contact頁面上，我有一個鏈接可以顯示電子郵件表單，它現在只是一個標題。我希望只要點擊不同的「頁面」就可以隱藏電子郵件表單;不過，現在需要兩次點擊來擺脫表格。該表格只能在Contact Page上顯示。我製作了一個小型測試用例來說明問題。JQuery |需要兩次點擊才能通過菜單欄隱藏Div標籤

我的代碼工作，但只有當你點擊菜單兩次。我需要幫助，所以我點擊一個鏈接，它會消失。

<!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>

來源

2014-03-06 Crysis

你爲什麼不標記jquery？ – caramba

我不確定。我試圖快速提交。我還有幾秒鐘的課。它不會讓我從應用程序添加標籤。 – Crysis

-1

is(':visible')檢查的元件的display屬性，可以使用css方法。

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

來源

2014-03-06 17:16:02 Rex

當我登上電腦時，我會嘗試一下。在我看的例子中，我非常確定我讀到它們是同義詞。 – Crysis

@Crysis當然，也嘗試使用jQuery中的可見選擇器https://api.jquery.com/visible-selector/ – Rex

我工作過的代碼;這段代碼沒有。我的代碼存在的問題是需要兩次點擊才能隱藏電子郵件表單。 – Crysis

，你必須改變你的HTML 一個小東西只是移動接觸DIV中的CONTACT_FORM格讓這樣的代碼

<!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>

然後取出if語句形成你的jQuery

<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>

來源

2014-03-31 13:03:27

JQuery |需要兩次點擊才能通過菜單欄隱藏Div標籤

回答

相關問題