0

そして、まだ頭を抱えているようには見えません。コンテンツ付きのサイドバーナビゲーションがあります。親メニューがクリックされたときにコンテンツを表示したいので、他のコンテンツを非表示にする必要があります。他の親メニューをクリックすると、他の親メニューが非表示になります。

ここにCSSがあります

 .sidebarContainer {
    position: relative;
    background: #f1f2f3;
    width: 80%;
    margin:auto;
    margin-bottom: 2%;
    padding: 1%;             
    overflow: hidden;
    border:blue;
    height:auto;
    clear:both;
    border:5px solid yellow;

}
.sidebarheading {
    width:15% auto;
    border:5px solid green;
}
.sidebarContainer .sidebarheading > .sidebarContent {
    position:relative;
    float: right;              
    border:5px solid red;
    right:450px;

ここにhtmlがあります

<div class="sidebarContainer">    
<div class="sidebarheading">        
    <h1>Heading1</h1>
        <div class="sidebarContent">
            <p class="content2">Hey Wassup</p>
        </div>
</div>


<div class="sidebarheading">
    <h1>Heading2</h1>
        <div class="sidebarContent">
            <p class="content1">Hey Wassup</p>
         </div>
</div>

ここにjqueryがあります

<script>
$(document).ready(function () {
    $('.sidebarheading').click(function () {
        $('.sidebarContent').hide('slow', function () {
            $('.sidebarContent').html($('sidebarContent').html());
            $('.sidebarContent').fadeIn('slow');
        })
    })
})

境界線はテスト用です。どんな助けでも大歓迎です:)

4

1 に答える 1