Question

我的代码是html + javascript。这是左侧菜单部分的主页面。在左侧菜单中，我发现当我单击第一级（profile_update_lv1）时，它不会展开第二级（profile_update_lv2）。你有什么想法？？是因为浏览器兼容还是任何代码错误？

<div id="profile_update_lv1" class="div_lv1"><input id="profile_update_btn_status" type="hidden" value="0"><a href="javascript:" onclick="buttonClick('profile_update_lv2','profile_update_btn_status'); " onmouseover="MM_swapImage('btn_profile','','/awip_strut2_tiles_serialize_dac/images/membersite/zh/menu_profile_update_r.gif',1);" onmouseout="MM_swapImgRestore()"><img src="http://localhost:7001/awip_strut2_tiles_serialize_dac/images/membersite/zh/menu_profile_update.gif" name="btn_profile" width="175" height="24" border="0" id="btn_profile"></a>
        <div id="profile_update_lv2" class="div_lv2" align="right" style="display:none;">
            <div><a href="changePwd" class="nav_grey_B_11" id="CHANGEPW">Change password</a></div>                  
            <div><a href="changeEmail" class="nav_grey_B_11" id="CHANGE_EMAIL">Change email</a></div>
        </div>
    </div>



    <script type="text/JavaScript" language="JavaScript1.2">
    var lastClick = "";
    var submenu = "";
    var lastClickStatus = "";

    function buttonClick(obj, status)
{
alert("buttonClick");
    if(document.getElementById(status).value ==0)
    {   
    alert("status=0");
        if(submenu!="") {
            $("#"+ submenu).slideUp();
            submenu="";
        }
        if(lastClick!="") {
            $("#"+ lastClick).slideUp();
            document.getElementById(lastClickStatus).value = 0;

        }
        alert("before slidedown");
            $("#"+ obj).slideDown();
        alert("after slidedown");
        document.getElementById(status).value = "1";
        lastClick = obj;
        lastClickStatus = status;
    }else{
        $("#"+ obj).slideUp();
        document.getElementById(status).value = "0";
    }   
}

    function buttonClickSub(obj, status) 
    {
        if(document.getElementById(status).value ==0)
        {
            $("#"+ obj).slideDown();
            document.getElementById(status).value = "1";
            submenu = obj;
        }else{
            $("#"+ obj).slideUp();
            document.getElementById(status).value = "0";
            submenu = "";
        }   
    }
    function openDisplay(obj){
        $("#"+ obj).show();
    }
    function cssOnGrey11(obj){
        $("#"+obj).removeClass("nav_grey_B_11");
        $("#"+obj).addClass("nav_grey_B_11_o");
    }
    function cssOnGrey10(obj){
        $("#"+obj).removeClass("nav_grey_B_10");
        $("#"+obj).addClass("nav_grey_B_10_o");
    }

    function highlightLv2(objId_lv1,objId_lv2,statusObjId)
    {
        document.getElementById(statusObjId).value = "1";
        openDisplay(objId_lv1);
        cssOnGrey11(objId_lv2);

    }
    function highlightLv3(objId)
    {
        cssOnGrey10(objId);
    }
    function parentRedirect(destUrl)
    {
        if (destUrl.substring(0,1) == "/")
        {
            destUrl = "http://"+getHost(document.location.href)+destUrl;
        }
        var newWin = window.open(destUrl);
        newWin.focus();
    }


    </script>

我根据下面的一些建议尝试了下面的代码：但是当我点击<p>click</p>

时它没有响应

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <script src="ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" ></script>
<script>    
$(document).ready(function() {
  $(".test").click(function()
  { 
    $(".toggle-div").slideToggle(),
    $(this).toggleClass("active"),
    $(".toggle-div  p").on("click",function(){$(".toggle-div").slideUp()})
  });
});
    </script>
    <style>
    .toggle-div{display:none;}
    </style>
    </head>
    <body>
        <form>
        <div class="test">
          <p>click</p>
        </div>
        <div class="toggle-div">
           <p>hello</p>
        </div>
        </form>

    </body>

</html>

Answer 1

您可以使用jquery。它是一个简单的4到5行功能。我在这里有更新的代码，您可以查看example。

'https://jsfiddle.net/anmolsandal/pgxo166n/2/'

javascript单击以展开菜单不起作用

1 个答案: