.hide() .show() div 메뉴의 javascript/Jquery 개선

저는 자바 스크립트와 jquery에 대한 새로운 아이디어가 많습니다.이 메뉴에 대해 조금만 노력해 왔지만 마침내 "완료"되었지만 iv 몇 가지 끔찍한 코드가 있고 그것을 더 읽기 쉽고 기능적으로 만들 수있는 코드를 개선 할 수있는 방법을 찾고 있습니다. 팁과 힌트가 도움이 될 것입니다. 생각이 여기에 코드.hide() .show() div 메뉴의 javascript/Jquery 개선

 <body> 

    <div class="content"> 

     <div class="menu" id="menu"></div> 
     <div class="content" id="sort"></div> 
     <div class="menu"id="menu1"></div> 
     <div class="content" id="1sort"></div> 
     <div class="menu"id="menu2"></div> 
     <div class="content" id="sort2"></div> 
    </div> 

    <script> 
     var show = true; 
     var show2 = false; 
     var show3 = false; 

     $('#1sort').hide("fast"); 
     $('#sort2').hide("fast"); 

     $("#menu").click(function() { 
      if (show == true) { 
       $('#sort').hide("fast"); 
       $('#1sort').show("fast"); 
       show = false; 
       show2 = true; 
      } else if (show == false) { 
       $('#sort').show("fast"); 
       $('#1sort').hide("fast"); 
       $('#sort2').hide("fast"); 
       show = true; 
       show2 = false; 
       show3 = false; 
      } 

     }); 

     $("#menu1").click(function() { 
      if (show2 == true) { 
       $('#1sort').hide("fast"); 
       $('#sort2').show("fast"); 
       show2 = false; 
       show3 = true; 
      } else if (show2 == false) { 
       $('#1sort').show("fast"); 
       $('#sort').hide("fast"); 
       $('#sort2').hide("fast"); 
       show = false; 
       show2 = true; 
       show3 = false; 
      } 

     }); 

     $("#menu2").click(function() { 
      if (show3 == false) { 
       $('#1sort').hide("fast"); 
       $('#sort').hide("fast"); 
       $('#sort2').show("fast"); 
       show = false; 
       show2 = false; 
       show3 = true; 
      }      
      });  



    </script>

출처

2012-06-28 matt23

우리가 작업 할 수있는 작업 [jsfiddle] (http://jsfiddle.net)을 만드는 것이 좋습니다. 지금은 마크 업에 내용이 없으므로이 방식을 구상하기가 어렵습니다. –

몇 가지 기본적인 순회 기능과 .is을 사용하여 가시성을 결정할 수 있습니다. 부울 변수 나 요소 ID가 필요하지 않습니다 (http://jsfiddle.net/K2sqy/2/).

$(".menu").click(function() { 
    var $next = $(this).next(".content"); // corresponding .content element 
    var isVisible = $next.is(":visible"); // is it currently visible? 

    $(this).siblings(".content").hide("fast"); // hide all siblings 
    $next[isVisible ? "hide" : "show"]("fast"); // toggle the corresponding .content 

    if(isVisible) { 
     // it was visible, so now it's hidden. Show the other .content: 
     // the next or, if not available, the previous 
     var $second = $next.nextAll(".content").first(); 
     if($second.length === 0) { 
      $second = $next.prevAll(".content").first(); 
     } 
     $second.show("fast"); 
    } 
});

출처

2012-06-28 12:00:54 pimvdb

이것은 완벽하게 감사했습니다 !! – matt23

@ matt23 : 업데이트되어 불필요한 것을 발견했습니다. – pimvdb

또한 JQuery와 .toggle 사용을 고려할 수()의 일부는 각 사업부는 사용자가 을 작성 것이라고 형태의 다른 부분이있을 것이다 페이지의 공간을 저장합니다. 더 많은 정보는 here.

$('#foo').toggle(showOrHide); 
is equivalent to: 

if (showOrHide == true) { 
    $('#foo').show(); 
} else if (showOrHide == false) { 
    $('#foo').hide(); 
}

출처

2012-06-28 11:44:42 septemberbrain

여기에 유용한 기술은 콘텐츠입니다 연결된 것을 표시하기 위해 링크에 몇 가지 추가 특성 (바람직하게는 HTML5 data-*)를 장식하는 것입니다.

<div class="menu" id="menu" data-content="sort"></div> 
<div class="content" id="sort"></div> 
<div class="menu"id="menu1" data-content="1sort"></div> 
<div class="content" id="1sort"></div> 
<div class="menu" id="menu2" data-content="sort2"></div> 
<div class="content" id="sort2"></div>

그런 다음 항목이 현재 표시를 숨길 클릭하면이를 사용하고 표시 할 수 있습니다 필요한 하나

$('.menu').click(function(){ 
    $('.content:visible').hide('fast'); 
    $('#' + $(this).data('content')).show('fast'); 
});

라이브 예 : http://jsfiddle.net/hAbPa/

출처

2012-06-28 11:47:27 Jamiec

-1

아니에요 (100) 확실히 (안된다) ...하지만 이것은 꽤 가깝다.

$(".menu").click(function(){ 
    $(this).next('.content').toggle(); 
});

출처

2012-06-28 11:48:58 Danny

.hide() .show() div 메뉴의 javascript/Jquery 개선

답변

관련 문제