컨테이너 안에 div를 표시하려면 링크를 클릭하십시오.

Question

여러 개의 컨테이너 (li)가 있습니다. 내부에는 링크가 있습니다. 클릭하면 일치하는 div를 열고 일치하지 않는 div를 숨길 필요가 있습니다.

div를 반복 할 수는 있지만 div를 열거 나 숨길 수는 없습니다.

Codepen는 : https://codepen.io/warddem/pen/kkzrPx

<ul> 
    <li> 
    <h3>Market study</h3> 
    <div> 
     <a href="#" data-toggle="#div1" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1" class="optionDiv">Results: </div> 
     <div id="div2" class="optionDiv">Learned: </div> 
     <div id="div3" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
    <li> 
    <h3>Competitive research</h3> 
    <div> 
     <a href="#" data-toggle="#div1" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1" class="optionDiv">Results: </div> 
     <div id="div2" class="optionDiv">Learned: </div> 
     <div id="div3" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
</ul> 

jQuery('.showSingle').click(function() { 

    var idOpen = $(this).siblings("div"); 
    var myIndex = $(this).index(); 

    if (idOpen.is("div")) { 
     // HIDE ALL DIVS IN PARENT 
     var divLength = idOpen.get(myIndex).id.length; 
     for (var i = 0, l = divLength; i < l; i++) { 
     console.log('divs to hide', idOpen[i]); 
     //HIDE DOESN'T WORK 
     //idOpen[i].hide(); 
     } 

     // HOW TO SHOW LINKED DIV ??? 
     console.log('div id to open: ', idOpen.get(myIndex).id); 
    } 

    }) 

Answer 1

아이디의 고유 만들기로 시작

. (이 문제는 현재 가지고있는 문제와 관련이없는 것 같습니다.)

.get() 요소를 요소로 반환합니다. jQuery 함수는 이러한 함수에 연결되지 않습니다. .eq()은 요소를 새 jQuery 객체의 일부로 리턴합니다.

<ul> 
    <li> 
    <h3>Market study</h3> 
    <div> 
     <a href="#" data-toggle="#div1a" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2a" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3a" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1a" class="optionDiv">Results: </div> 
     <div id="div2a" class="optionDiv">Learned: </div> 
     <div id="div3a" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
    <li> 
    <h3>Competitive research</h3> 
    <div> 
     <a href="#" data-toggle="#div1b" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2b" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3b" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1b" class="optionDiv">Results: </div> 
     <div id="div2b" class="optionDiv">Learned: </div> 
     <div id="div3b" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
</ul> 

jQuery('.showSingle').click(function() { 

    var idOpen = $(this).siblings("div"); 
    var myIndex = $(this).index(); 

    if (idOpen.is("div")) { 
     // HIDE ALL DIVS IN PARENT 
     var divLength = idOpen.get(myIndex).id.length; 
     for (var i = 0, l = divLength; i < l; i++) { 
     console.log('divs to hide', idOpen[i]); 
     //HIDE DOESN'T WORK 
     idOpen.eq(i).hide(); 
     } 

     // HOW TO SHOW LINKED DIV ??? 
     idOpen.eq(myIndex).show(); 
     console.log('div id to open: ', idOpen.get(myIndex)); 
    } 

    });