2017-03-15 9 views
0

私は現在、ブートストラップのウェブサイトで取り組んでいます。私はjqueryとJavaで新しいので、私はこれを行う方法を理解することはできません。私は写真のギャラリーを示しメニューのShowHide機能を使用していhttp://jsfiddle.net/PVLMX/2/一度に1つのdivだけを表示するには、ShowHide(shID)を表示しますか?

function showHide(shID) { 
if (document.getElementById(shID)) { 
    if (document.getElementById(shID+'-show').style.display != 'none') { 
    document.getElementById(shID+'-show').style.display = 'none'; 
    document.getElementById(shID).style.display = 'block'; 
    } 
    else { 
    document.getElementById(shID+'-show').style.display = 'inline'; 
    document.getElementById(shID).style.display = 'none'; 
    } 
} 
} 

私はこのような何かを持っています。私は一度に1つのdivを表示できるようにしたいと思います。この例では、「このコンテンツを隠す」をクリックすることなく、2番目のボタンを押すと最初のコンテンツを隠すことになります。私は "このコンテンツを隠す"ボタンを削除したい。

それは意味がありますか?申し訳ありませんが私は明確ではないと任意の助けをありがとう!

答えて

0

あなたのHTMLを少し変更するとjQueryを追加して、あなたはこの方法でそれを達成することができますが:

HTML

<div id="wrap"> 
    <p>This text is visible, but there is more. 
    <a href="#" id="example-show" class="showLink"> 
     <br/> 
     <br/>See more >></a> 
    </p> 
    <div id="example" class="more"> 
    <p>This text was hidden, now you see it</p> 

    </div> 
</div> 
<div id="wrap"> 
    <p>This text is visible, but there is more. 
    <a href="#" id="example2-show" class="showLink"> 
     <br/> 
     <br/>See more >></a> 
    </p> 
    <div id="example2" class="more"> 
    <p>This text was hidden, now you see it</p> 
    </div> 
</div> 

jQueryの

$('.showLink').click(function() { 

    $('.showLink').parent().next().hide(); 
    $(this).parent().next().show(); 

}) 

あなたのhtmlでのjQueryを追加することを忘れないでくださいヘッド部

彼女電子Jsfiddleです:http://jsfiddle.net/PVLMX/13/

あなたはjQueryのparent()next()についてもっと何かを知りたい場合は、次の

https://api.jquery.com/parent/

https://api.jquery.com/next/

関連する問題