クローズ時にJqueryメニューを開く/閉じる

Question

フォーラム用のリンクをいくつか保持するように設計されたメニューがあります。私はそれをクリックしてクリックして閉じると開きます。ここに私のコードです。

/*Custom BBPress admin links menu*/ 
function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) { 
    if (is_user_logged_in()) { 
    $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">'; 
    $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>'; 
    $menulinks .= '<ul class="bbp_custom_links_submenu">'; 
    foreach($r['links'] as $key => $val) { 
     $menulinks .= "<li>{$val}</li>"; 
    } 
    $menulinks .= '</ul></li></ul>'; 

    echo $r['before'] . $menulinks . $r['after']; 
    } 
} 
add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3); 
add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3); 

add_action('wp_footer', 'overflow_overriding'); 
function overflow_overriding() { 
    if (!is_user_logged_in()) { 
    }else{ 
    ?> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"}); 
jQuery('.bbp-admin-links:even').click(function(e) { 
e.preventDefault(); 
$('ul:first',$(this)).toggleClass('hidden active'); 
}); 
}); 
</script> 

    <?php 
    } 
} 

このリンクをガイドとして使用しようとしました。

https://stackoverflow.com/a/2937603/6147300

私が正しい、すべてのjQueryを持っているが、私は私がターゲットに必要なものをターゲットにCSSを使用する方法がわかりません。また、CSSをどこに置くべきかはっきりしていません。JqueryコードやCSSエディタに入れる必要がありますか？

提案がありますか？

Answer 1

良い方法は、クラスをjQueryで追加して、そのクラスのスタイルをCSSで指定することです。以下の例を参照してください。

HTML

<ul id="menu"> 
<li>Home</li> 
<li>Portfolio</li> 
<li>About Us</li> 
<li>Contact Us</li> 
</ul> 

<button id="toggle">Toggle Menu</button> 

CSS

#menu { 
    display: block; 
    list-style-type: none; 
    position: absolute; 
    top: 0; 
    right: -120px; 
    width: 100px; 
    background: #000; 
    color: #fff; 
    padding: 10px; 
    -webkit-transition: 0.5s; 
    transition: 0.5s; 
} 

.active { 
    right: 0px !important; 
} 

JS

$("#toggle").on('click', function() { 
    $('#menu').toggleClass("active"); 
}); 

https://jsfiddle.net/7f1kxo9f/

Answer 2

これはあなたが望むものである： コピー、およびSテストを開始するHTMLファイルに保存してください。

<style> 
    #lang-selector { 
    font-size: 12px; 
    height: 21px; 
    margin: 7px auto 17px auto; 
    width: 250px; 
    font-family: Verdana; 
    } 

    #lang-selector span { 
    color: #999; 
    float: left; 
    margin: 4px 0 0 87px; 
    padding-right: 4px; 
    text-align: right; 
    } 

    #lang-selector ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    } 

    #lang-selector ul li a { 
    padding: 3px 10px 1px 10px; 
    } 

    #lang-selector ul, #lang-selector a { 
    width: 186px; 
    } 

    #lang-selector ul ul { 
    display: none; 
    position: absolute; 
    } 

    #lang-selector ul ul li{ 
    border-top: 1px solid #666; 
    float: left; 
    position: relative; 
    } 

    #lang-selector a { 
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; 
    color: #666; 
    display: block; 
    font-size: 12px; 
    height: 17px; 
    padding: 4px 10px 0 10px; 
    text-align: left; 
    text-decoration: none; 
    width: 166px; 
    } 

    #lang-selector ul ul li a { 
    background: #333; 
    color: #999; 
    } 

    #lang-selector ul ul li a:hover{ 
    background: #c4262c; 
    color: #fff; 
    } 
</style> 
<div id="lang-selector"> 
    <ul> 
    <li> 
     <a href="#">Choose a Language</a> 
     <ul> 
     <li><a href="#">English</a></li> 
     <li><a href="#">Deutsch</a></li> 
     <li><a href="#">Italiano</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script type="text/javascript"> 

/* Language Selector */ 

$(function() { 
    $("#lang-selector li:first").click(function(){ 
     $('ul:first',this).toggle(); 
    }) 
}); 

$(document).ready(function(){ 

    /* Navigation */ 
    $('.subnav-game').hide(); 
    $('.subnav-game:eq(0)').show(); 
    $('.preorder-type').hide(); 


    $('.preorder-type:eq(3)').show(); 


}); 
</script>