单击div以展开它并单击它以使用javascript关闭它

Question

我不知道为什么我不能在我的网站上复制这个功能。首先，令人难以置信的是它在一个页面上工作。我可以逐字地复制该页面上的每一段代码，当我尝试在同一目录中构建一个新页面时，我无法复制相同的功能。 我正在查看左侧菜单中的“委员会”按钮。

以下是正常运行的页面上的代码。

<li class="has-sub ">
    <a href="javascript:;">
        <i class="icon-table"></i> 
        <span class="title">Commissions</span>
        <span class="arrow "></span>
    </a>
    <ul class="sub">
       <li ><a href="freedomtextim/multi pay Life_ printable payout spreadsheet_published.xlsx">Life Grid</a></li>
       <li ><a href="freedomtextim/annuities/annuity multi pay_ printable payout spreadsheet_published.xlsx">Annuity Commission</a></li>
       <li ><a href="freedomtextim/FEG Promotional Guidelines 2014.docx">Promotional Guidelines</a></li>
    </ul>
</li>

检查元素时，您看到的是

当您点击并检查元素时，这是点击后更改的内容，它会从display none更改为display block:

最后div名称更改为sub open和arrow open

这是我的代码：

<li class="has-sub ">
    <a href="javascript:;">
       <i class="icon-table"></i> 
       <span class="title">Commissions</span>
       <span class="arrow "></span></a>
       <ul class="sub" style="display: block; overflow: hidden: 40.234671256042006px; padding-top: 0px; margin-top: 3.498667065742783; padding-bottom: 0px; margin-bottom: 3.498667065742783px; ">  
           <li ><a href="freedomtextim/multi pay Life_ printable payout spreadsheet_published.xlsx">Life Grid</a></li>
           <li ><a href="freedomtextim/annuities/annuity multi pay_ printable payout spreadsheet_published.xlsx">Annuity Commission</a></li>
           <li ><a href="freedomtextim/FEG Promotional Guidelines 2014.docx">Promotional Guidelines</a></li></ul>

我试图添加额外的代码以使其工作..你会看到代码的第二位“这是我的代码”。我无法弄清楚为什么如果我复制并粘贴从原始页面到新页面的所有内容它将无法工作..所有相同的代码都在那里......令人沮丧..

页面上唯一的javascript是几个片段：

function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=800,width=1200,left=0,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

<!-- BEGIN RESPONSIVE MENU TOGGLER -->
                <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="arrow"></span>
                </a>          
                <!-- END RESPONSIVE MENU TOGGLER -->

非常感谢任何帮助。谢谢。

Answer 1

使用jQuery试试这个：

<!-- HTML -->
<ul>
    <li class="has-sub">
        <a href="#" id="commbtn"><span class="title">commissions</span></a>
        <ul class="sub" id="hideShowComm">
            <li ><a href="#">Item 1</a></li>
            <li ><a href="#">Item 2</a></li>
        </ul>
    </li>
</ul> 

<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#commbtn').live('click', function(event) {        
            jQuery('#hideShowComm').toggle('show');
        });
    });
</script>

Code Demo

只要您想要控制的元素上的所有页面都具有相同的ID，就可以使用。