2013-09-22 1 views
1

HTML :jQuery를 선택 버그

<div id="accordion"> 
    <div class="top"> 
     <a href="" class="showAll">Show all</a> &nbsp; | &nbsp; <a href="" class="hideAll">Hide all</a> 
    </div> 
    <div class="body"> 
     <div class="item"> 
      <a href="" class="head" title="show">item1</a> 
      <div class="content"> 
       <p> 
        Item1 content; 
       </p> 
       <a href="" class="backToTop">Back to top</a> 
      </div> 
     </div> 
     <div class="item"> 
      <a href="" class="head" title="show">Item2</a> 
      <div class="content"> 
       <ul> 
        <li>item2 content;</li> 
        <li style="list-style: none"><a href="" class="backToTop">Back to top</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

JS :

$("#accordion .content").slideUp(); 
$("#accordion .item a.head").click(function (e) { 

    //open tab when click on item 

    e.preventDefault(); 
    $(this).toggleClass('active'); 
    $(this).next().stop().slideToggle(); 
    if ($(this).hasClass('active')) { 
     $(this).attr('title', 'hide'); 
    } else { 
     $(this).attr('title', 'show'); 
    } 
}); 
$("#accordion .showAll").click(function (e) { 

    //open all tab 

    e.preventDefault(); 
    $("#accordion .item a").each(function() { 
     if (!$(this).hasClass('active')) { 
      $(this).click(); 
     } 
    }); 
}); 
$("#accordion .hideAll").click(function (e) { 

    //hide all tab 

    e.preventDefault(); 
    $("#accordion .item a").each(function() { 
     if ($(this).hasClass('active')) { 
      $(this).click(); 
     } 
    }); 
}); 

$(".backToTop").click(function (e) { 

    //scroll to top 

    e.preventDefault(); 
    $('body, html').animate({ 
     scrollTop: 0 
    }, 450); 
}); 

기본적으로는 아코디언, 여기

JSfiddle JQuery와 이루어 매우 간단 하나 : http://jsfiddle.net/PqaXZ/6/ (주 * :이 예를 보려면 아래로 스크롤해야합니다.) "Show All"버튼을 클릭하는 이유는 누구나 설명 할 수 있습니다. "Ba ck to top "버튼을 클릭하십시오.

당신이 그것을에 클릭을 유발하고 있기 때문에 아무것도 가능성을 미리

답변

1

의 코드에

고마워 그것을 일으킬 수 표시되지 않습니다.

$("#accordion .item a")에는 "모두 표시"버튼이 포함되어 있으며 사용자가 해당 링크를 클릭하는 것을 시뮬레이션 한 $(this).click();입니다. 그러므로 그들을 맨 위로 보내기.

2

음, 당신의 "모두 표시"핸들러를 클릭, 당신은 아코디언의 모든 "비활성"링크를 클릭하고 지역 :

$("#accordion .item a").each(function() { 
    if (!$(this).hasClass('active')) { 
     $(this).click(); 
    } 
}); 

을 만약에 아무 곳이나 '뒤로 가기'링크 중 하나 이상 아코디언에는 '활성'클래스가 없으므로 클릭 이벤트가 발생합니다.

+0

벙어리 나! 매우 당황스러운!!! –

1

당신이 당신의 선택 내부 공간을 사용하고 있기 때문에, 그것은 아래의 모든a에 '클릭'어떤 당신의 '뒤로 가기'버튼을 포함는 #accordion 아래.item. 선택기를 #accordion .item>a으로 변경하면 .item의 직계 하위 인 a을 '클릭'합니다.

1

#accordion .item a

#accordion .item > a 

알에게 첫 번째 링크를 실행하는 데 사용해야합니다 .item 내부의 모든 링크를 트리거 있지만하지 차일