點擊鏈接以顯示容器內的div

Question

我有多個容器（li）。裏面有鏈接。點擊時，他們需要打開一個匹配的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

與製作ID獨特的開始。 （雖然這與您遇到的問題似乎沒有關係。）

.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)); 
    } 

    });