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

PC를 사용할 때 사용해 보겠습니다. 내가 본 예제에서 나는 그들이 동의어라는 것을 꽤 확신했다. – Crysis

@Crysis, jquery에서 보이는 선택기로도 시도하십시오. https://api.jquery.com/visible-selector/ – Rex

코드는 작동했습니다. 이 코드는 그렇지 않습니다. 내 코드의 문제점은 전자 메일 양식을 숨기려면 두 번 클릭해야한다는 것입니다. – Crysis

당신이 문 당신의 jQuery를 형성하는 경우 다음을 제거 단지 하자 코드이

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

같은 접촉 DIV 내부 CONTACT_FORM의 DIV를 이동하여 HTML 에 작은 일을 변경해야

<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 태그가 숨겨집니다.

답변

관련 문제