창 크기가 480px 이후에 표시 할 '더보기'옵션 표시

Question

내가하려는 것은 기본적으로 화면 크기가 480px 이하인 경우에만 표시 및 숨기기를 수행하는 것입니다.

간단한 메뉴입니다. 창 크기가 최대 크기 인 480px가 아닌 경우 모든 항목 표시 창 크기가 480px보다 작거나 같으면 메뉴를 더 표시하는 옵션을 지정하십시오. 그러나 사용자가 '기타'옵션을 클릭하면 첫 번째 2 개 항목을 숨기고 숨겨진 옵션으로 대체하십시오. 그리고 그 반대도 마찬가지입니다.

예 : (창 크기 480 픽셀) :

Home 
Email 
... More 

<!---- 'MORE' CLICKED ----!> 

People 
Explore 
... More 

그래서 내 질문은 이것이다 : 어떻게 두 번째로 첫 번째 DIV를 교체하고 켜고 끌 수 있을까요?

내 코드 : 여기

$('a.show-more').click(function(){ 
    $('.mobile-1').hide(); 
    $('.mobile-2').show(); 
},function(){ 
    $('.mobile-1').show(); 
    $('.mobile-2').hide(); 
}); 

내가 함께 일하고 있어요 무엇을 보여줄 수있는 fiddle이다. 사전에 도움을 주셔서 감사합니다.

Answer 1

.is(':visible')을 사용하여 숨기기/표시 할 항목을 결정한 다음 표시된 요소의 끝에 ...more을 추가하기 만하면됩니다.

당신은 당신의 코드에서 문제의 무리가

$(function() { 
    $('.more').click(function() { 
     if ($('.mobile-1').is(":visible")) { 
      $('.mobile-1').hide(); 
      $('.mobile-2').show(); 
      $(this).appendTo($('.mobile-2')); 
     } else { 
      $('.mobile-1').show(); 
      $('.mobile-2').hide(); 
      $(this).appendTo($('.mobile-1')); 
     } 
    }); 


    $(window).resize(function() { 
     if ($(window).height() > 480) { 
      $('.mobile-1').show(); 
      $('.mobile-2').show(); 
      $('.more').hide(); 
     } else { 
      $('.mobile-1').show(); 
      $('.mobile-2').hide(); 
      $('.more').show().appendTo($('.mobile-1')); 
     } 
    }); 

    // $(window).resize(); // if you do away with your css height check 

}); 

Answer 2

demo를 참조하십시오

1) 모든 <ul> 태그 직접적인만을 자식으로 <li> 태그를 가져야한다. 거기에 <div> 태그를 넣으면 안됩니다. <li>에 수업을 추가 할 수 있습니다.

2) 클릭 처리기가 올바르게 구성되지 않았습니다. 두 가지가 아니라 한 가지 기능 만 사용해야합니다.

3) 내비게이션의 <a> 태그는 display:block으로 설정해야 단어가 아닌 배경색을 아무 곳이나 클릭 할 수 있습니다. 여기

은 바이올린입니다 : 내가 대신 단지 LI 항목의 일부 div의를 사용하기 때문에 목록이 제대로 선언되지 않았습니다 생각 http://jsfiddle.net/W3Sav/12/

Answer 3

, 그래서 당신은이 구조를 시도 할 수 있습니다 :

<ul class="nav"> 
    <li class="item"> 
     <a href="/home/">Home</a> 
    </li> 
    <li class="item"> 
     <a href="/home/">Email</a> 
    </li> 
    <li class="item mobile-2"> 
     <a href="/home/">People</a> 
    </li> 
    <li class="item mobile-2"> 
     <a href="/home/">Explore</a> 
    </li> 
    <li class="more"> 
     <a class="show-more">... More</a> 
    </li> 
</ul> 

만 LI를 사용 DIV 태그가 없으므로 토글 될 항목에 클래스를 추가했습니다. 이 코드

그리고 당신이 제어 할 수 있습니다 가시성 :

이 작동

$('a.show-more').click(function(){ 
     $('.item').toggle(); 
    });