jQuery 계층 메뉴 디자인

StackOverflow https://stackoverflow.com/questions/615051

  •  03-07-2019
  •  | 
  •  

문제

편집하다: 좋아, 라인 :

$( <?php echo("'#".$_GET['item']."'")  ?> ).parent().show();

분명히 메뉴를 올바른 장소에 열어 두려고 시도합니다. 나는 이것이 효과가 있다고 생각하지 않습니다 (다른 PPLS 코드에서 일하는 것이 싫어).

그런 다음 내 현재 문제는 액세스하는 방법입니다 <ul class="myul"> 바로 위 <li id="001" > 그 항목을 사용하면 ID = 001 ??

안녕

나는 지금 잃어버린 프로그래머가 나에게 남겨진 코드를 고치려고 노력하고있다. 작동하지만 기능이 없습니다. 메뉴 항목을 선택할 때 올바른 위치에 열리지 않습니다.

jQuery :

$.swapImage(".swapImage");                                  
            $( <?php echo("'#".$_GET['item']."'")  ?> ).parent().show();
            $('.myul').hide();              
            $('.slide_ul li:not(:first-child)').hide();     
            $('.hideMe').click(function(){ 
                $(this).next('ul').slideToggle('fast').siblings('ul:visible').slideUp('fast');
            });                             
            $('.myul a').click(function(e){
                var url = $(this).attr('href');
                var index = url.indexOf('=');
                var substr = url.slice(index+1);                    
                $('#productContainer >div').hide();
                $('#productContainer').load("products/"+substr+"/product.html", function(){
                    $(this).fadeIn('slow'); 
                    var i = 0;
                    $('.slide_ul li:not(:first-child)').hide();                                                                             
                });                 
            });

HTML :

    <!-- Right Navigation -->
                        <div id="rightNav">
                            <div id="navMenu">
                                <h2 id="navMenuheader">Catalogue</h1>
                                <h3 class="hideMe">Widgets</h3>
                                <ul class="myul">
                                    <h4 class="hideMe">Widget Coins</h2>
                                    <ul class="myul">
                                        <li id="001" >
                                             <a href="products.php?item=001">The South African Widget</a>
                                          </li>

메뉴 클릭의 결과는 페이지 중간에 검은 색 디스팅으로 이동하는 것입니다. 하다 $(document).ready(function(){ 이런 일이 발생할 때마다 발생합니까? 그렇지 않으면 모든 메뉴 위치가 업데이트되는 이유를 알 수 없습니다.

메뉴의 장소를 식별하고 열린 상태로두기 위해 더 많은 코드가 필요하다고 생각합니다. 내 책상에 개미가 있습니다.

도움이 되었습니까?

해결책 2

메뉴가 모두 숨겨진 후 메뉴의 관련 섹션을 다시 열기 위해 jQuery를 추가해야했습니다. 그래서 라인 직후 $('.myul').hide() URL 쿼리 (Products.php? item = 001)를 기반으로 메뉴 섹션을 다시 열었습니다. 

var item =  <?php echo("'".$_GET['item']."'")  ?>;

                if (item != '')             
                {
                    item = "li#" + item;            
                    $(item).parent().show();
                    $(item).parent().parent().show();
                }

다른 팁

나에게 나쁜 닫는 태그가 켜져 있습니다

<h4 class="hideMe">Widget Coins</h2>

클릭하면 주요 문제입니다.

$(this).next('ul')

H4의 형제 대신 아이이기 때문에 UL을 찾지 못합니다.
변경

<h4 class="hideMe">Widget Coins</h4>

그것이 당신이 찾고 있던 전부인지 확실하지 않고 더 잘 작동하게합니다.

$( <?php echo("'ul:has(#".$_GET['item'].")'");  ?> ).show();

지정된 ID가있는 자손이있는 모든 UL을 열 것입니다.
.parent ()를 사용하는 것만으로도 Top UL이 표시되지 않았습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top