jQuery로 열면 div를 표시하고 기존 div를 숨 깁니다.

기본적으로 숨겨진 두 개의 div가 있습니다. 그런 다음 사용자는 클릭시 div를 표시합니다. div가 이미 열려 있고 사용자가 다른 div를 표시하기 위해 클릭하면 현재 div가 숨기고 새로운 div가 표시됩니다.jQuery로 열면 div를 표시하고 기존 div를 숨 깁니다.

나의 현재 코드는이 ..

HTML

<div class="menu">MENU</div> 
<div class="search">SEARCH</div> 

<div class="menu-box">MENU BOX</div> 
<div class="search-box">SEARCH BOX</div>

CSS

.menu, .search { 
     display:inline-block; 
     cursor:pointer; 
    } 

    .menu, .search, .menu-box, .search-box { 
     padding:20px; 
     background-color: #ccc; 
     margin-right:10px; 
    } 

    .menu-box, .search-box { 
     width:20%; 
     display:none; 
    } 

    .menu-box { 
     background-color:red; 
    } 

    .search-box { 
     background-color:green; 
    }

JAVASCRIPT

내가 도움을 주위에 모양을했다,하지만 모든 솔루션이 발견

http://codepen.io/seraphzz/pen/zbHDk

현재 작업 데모를 볼 수 있습니다

$('.menu').click(function(){ 
    $('.menu-box').slideToggle(); 
}); 

$('.search').click(function(){ 
    $('.search-box').slideToggle(); 
});

은 ... 하나 개의 사업부가 항상 표시되어 탭에 대한 것입니다. 이것은 내가 겪은 것이 아닙니다. div는 해당 링크를 클릭 한 경우에만 표시되어야합니다.

'menu'div가 이미 열려 있고 사용자가 '검색'을 클릭하면 '메뉴'div가 숨기고 '검색'이 표시되기를 원합니다. 두 부서는 동시에 표시해서는 안됩니다! ,

$('.search').click(function(){ 
    $('.search-box').slideToggle(); 

    if($(".menu-box").is(":visible")) { 
     $(this).slideToggle(); 
    } 

});

및 메뉴 핸들러가 같은 행동을 할 경우에만 검색 창 가시성을 확인 : 사전

출처

2013-06-08 Adam

같은 클래스를 사용하면 훨씬 쉽게 할 수 있습니까?

<div class="btn">MENU</div> 
<div class="btn">SEARCH</div> 


<div class="slide menu-box">MENU BOX</div> 
<div class="slide search-box">SEARCH BOX</div>

$('.btn').on('click', function(){ 
    $('.slide').slideUp().eq($(this).index()).stop().slideToggle(); 
});

FIDDLE

출처

2013-06-08 15:24:59 adeneo

좋은 해결책입니다. 이 코드를 편집하여 새 항목이 열리기 전에 열려있는 div가 닫힐 수 있습니까? 내가 여기에서했던 것처럼 .. http://codepen.io/seraphzz/pen/Ldsav – Adam

@ 아담 -이 무언가와 같은 것 [*** FIDDLE ***] (http://jsfiddle.net/6Ssys/1 /) <----- – adeneo

이 완벽한 덕분입니다 – Adam

에서

감사로 검색 클릭 핸들러를 변경

출처

2013-06-08 15:15:33

$ (이) .slideToggle(); $ ('. menu-box') 대신에 slideToggle(); ? 그냥 말하고 .. – writeToBhuwan

@writeToBhuwan 그래, 아마 $ (this)를 사용하는 것이 더 연습 :) –

감사합니다. 나는이 점을 출발점으로 삼았고 전환이 더 우아하기 때문에 그것을 조정했다.). 여기에 codepen입니다 ... http://codepen.io/seraphzz/pen/Ldsav - 이것을 작성하는 더 깨끗한 방법이 있습니까? – Adam

<h3><a href="#1" class="toggler">Title of Section 1</a></h3> 
<div id="1" class="element">Content goes here for the above h tag</div> 

<h3><a href="#2" class="toggler">Title of Section 2</a></h3> 
<div id="2" class="element">Content goes here for the above h tag</div> 


$(".toggler").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).attr('href'); 

    $(".element").hide(); 
    $(id).show('slow'); 

});

출처

2013-10-02 13:30:47 Chris

jQuery로 열면 div를 표시하고 기존 div를 숨 깁니다.

답변

관련 문제