Jquery menüsünü açmak/kapatmak için tıklayın

Question

Bir foruma bağlantı eklemek için tasarlanmış bir menüm var. Tıklamada açmak ve tıklamayı kapatmak istiyorum. İşte benim kodum.

/*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 
    } 
} 

Bu bağlantıyı bir kılavuz olarak kullanmayı denedim.

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

tüm jQuery doğru var, ama ben hedeflediğim için gerekenleri hedeflemek için CSS nasıl kullanılacağını bilmiyorum. Ayrıca CSS'yi nereye koyacağımı, JQuery kodunda veya CSS editörümde olması gerektiği konusunda da net değilim.

Herhangi bir öneriniz var mı?

Answer 1

İyi bir yöntem jQuery ile bir sınıf eklemek ve daha sonra CSS ile o sınıfın stillerini hedeflemektir. Aşağıdaki örneğe bakınız.

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

bu istediğini geçerli: Kopyala ve s test etmek için HTML dosyasında ave.

<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>