jquery、css、html

Question

アコーディオンメニューを選択したままにするには、jsをクリックしてサブメニューを選択したままにしておく必要があります。またはcss。

htmlの静的解ではありません。 jQueryとCSS を備える 必要性ソリューションは、あなたがしているものである後

チェックアウトフィドル

https://jsfiddle.net/shaswatatripathy/ucgff65k/

$(document).ready(function() { 
 

 
    $("#accordion > li > div").click(function() { 
 
    $("#submenu li").slideUp(); 
 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } 
 
    }); 
 
});

.accordion { 
 
    width: 100%; 
 
    max-width: 260px; 
 
    background: #FFF; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion .link { 
 
    cursor: pointer; 
 
    display: block; 
 
    padding: 15px 15px 15px 42px; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    border-top: 1px solid #CCC; 
 
    border-bottom: 1px solid #CCC; 
 
    border-right: 1px solid #CCC; 
 
    position: relative; 
 
    -webkit-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 

 
/*-------------Submenu-----------------------------*/ 
 

 
.submenu { 
 
    padding: 0px; 
 
    display: none; 
 
    font-size: 14px; 
 
} 
 

 
.submenu li { 
 
    border-bottom: 1px solid #4b4a5e; 
 
} 
 

 
.submenu a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #23222d; 
 
    background-color: #CCC; 
 
    padding: 12px; 
 
    padding-left: 42px; 
 
    -webkit-transition: all 0.25s ease; 
 
    -o-transition: all 0.25s ease; 
 
    transition: all 0.25s ease; 
 
} 
 

 
#submenu li.active { 
 
    display: block; 
 
} 
 

 
.submenu a:hover { 
 
    background: #b63b4d; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul id="accordion" class="accordion"> 
 
    <li> 
 
    <div class="link">Menu 2</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div class="link">Menu 3</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

希望をクリックしたホバリングと同じように表示されます探して、

$(document).ready(function() { 
 

 
    $("#accordion > li > div").click(function() { 
 
    $("#submenu li").slideUp(); 
 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } 
 
    }); 
 
    
 
    $(".submenu li a").click(function(){ 
 
    $(".submenu li a.active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

.accordion { 
 
    width: 100%; 
 
    max-width: 260px; 
 
    background: #FFF; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion .link { 
 
    cursor: pointer; 
 
    display: block; 
 
    padding: 15px 15px 15px 42px; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    border-top: 1px solid #CCC; 
 
    border-bottom: 1px solid #CCC; 
 
    border-right: 1px solid #CCC; 
 
    position: relative; 
 
    -webkit-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 

 
/*-------------Submenu-----------------------------*/ 
 

 
.submenu { 
 
    padding: 0px; 
 
    display: none; 
 
    font-size: 14px; 
 
} 
 

 
.submenu li { 
 
    border-bottom: 1px solid #4b4a5e; 
 
} 
 

 
.submenu a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #23222d; 
 
    background-color: #CCC; 
 
    padding: 12px; 
 
    padding-left: 42px; 
 
    -webkit-transition: all 0.25s ease; 
 
    -o-transition: all 0.25s ease; 
 
    transition: all 0.25s ease; 
 
} 
 

 
#submenu li.active { 
 
    display: block; 
 
} 
 

 
.submenu a:hover { 
 
    background: #b63b4d; 
 
    color: #FFF; 
 
} 
 
.submenu li a.active { 
 
    background: #b63b4d; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="accordion" class="accordion"> 
 
    <li> 
 
    <div class="link">Menu 2</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div class="link">Menu 3</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

このように、<a>の:hover状態のCSSと一致する<li>内部<a>タグの.activeクラスを作成します。

a.active { 
    background: #b63b4d; 
    color: #FFF; 
} 

そしてだけにclickイベントリスナーを使用しますこのクラスを追加して削除するには、サブメニューをクリックしてください：

$(document).ready(function() { 

    $("#accordion > li > div").click(function() { 
    if (!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
    } else { 
     $(this).next().slideUp(); 
    } 
    }); 

    $(".submenu a").click(function() { 
      $(this).toggleClass("active").parent().siblings().find("a").removeClass("active"); 
    }); 

}); 

オープン状態でクリックしたときにアコーディオンが閉じられるようにjQueryにも変更されました。

ここで働いてjsfiddleです：https://jsfiddle.net/ucgff65k/2/ とコードスニペット：

$(document).ready(function() { 
 
    
 
    $("#accordion > li > div").click(function() { 
 
    if (!$(this).next().is(":visible")) { 
 
     $(this).next().slideDown(); 
 
    } else { 
 
     $(this).next().slideUp(); 
 
    } 
 
    }); 
 
    
 
    $(".submenu a").click(function() { 
 
     \t \t $(this).toggleClass("active").parent().siblings().find("a").removeClass("active"); 
 
    }); 
 
    
 
});

.accordion { 
 
    width: 100%; 
 
    max-width: 260px; 
 
    background: #FFF; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion .link { 
 
    cursor: pointer; 
 
    display: block; 
 
    padding: 15px 15px 15px 42px; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    border-top: 1px solid #CCC; 
 
    border-bottom: 1px solid #CCC; 
 
    border-right: 1px solid #CCC; 
 
    position: relative; 
 
    -webkit-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 

 
/*-------------Submenu-----------------------------*/ 
 

 
.submenu { 
 
    padding: 0px; 
 
    display: none; 
 
    font-size: 14px; 
 
} 
 

 
.submenu li { 
 
    border-bottom: 1px solid #4b4a5e; 
 
} 
 

 
.submenu a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #23222d; 
 
    background-color: #CCC; 
 
    padding: 12px; 
 
    padding-left: 42px; 
 
    -webkit-transition: all 0.25s ease; 
 
    -o-transition: all 0.25s ease; 
 
    transition: all 0.25s ease; 
 
} 
 

 
.submenu a:hover { 
 
    background: #b63b4d; 
 
    color: #FFF; 
 
} 
 

 
a.active { 
 
    background: #b63b4d; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="accordion" class="accordion"> 
 
    <li> 
 
    <div class="link">Menu 2</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div class="link">Menu 3</div> 
 
    <ul class="submenu"> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
     <li><a href="#">submenu1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>