javascript - 点击<a>显示<ul>，点击其他隐藏<ul>

Question

我想创建一个 <UL>像 <SELECT> 这样的列表行为但 onclick是<A>标签。谁能解决这个问题？

HTML:

<div class="btn-group">
    <a class="grey-btn btn btn-mini" onclick="<?php echo $this->getJsModel(); ?>.showHideAction(<?php echo $i; ?>);">Action</a>
    <a class="grey-btn btn btn-mini dropdown-toggle" onclick="<?php echo $this->getJsModel(); ?>.showHideAction(<?php echo $i; ?>)">
        <span class="caret"></span>
    </a>
    <ul id="dropdown_action_<?php echo $i; ?>" name="dropdown_action_<?php echo $i; ?>" class="dropdown-menu" style="display:none;">
        <li style="cursor:pointer;" onClick="<?php echo $this->getJsModel(); ?>.activeAddtocartSubmit(<?php echo $i; ?>, <?php echo $collection->getSize(); ?>, '<?php echo $_url; ?>', '<?php echo $this->getForm(); ?>');">Add to Cart</li>
    </ul>
</div>

Javascript:

showHideAction : function(i){
    $('dropdown_action_'+i).toggle();
},

Answer 1

改变

$('dropdown_action_'+i).toggle();

到

$('#dropdown_action_'+i).toggle(); // '#' is used to select element with specified id