Question

我正在尝试开发一个webpart，它显示父子孙关系中的页面。 Iam尝试扩展和折叠孩子们以显示大孩子，但是当我尝试扩展子节点时，我的代码试图折叠父级。我发布我的jquery和css文件，请帮助我，如果我做错了什么。

[更新]

我已将代码更改为类似的内容......但现在问题是当您展开图像时图像未更改为 [ - ]。

感谢。

Jquery代码：

<script>
function handleClick(ev) {
ev = ev || window.event;
if(ev.preventDefault) {
ev.preventDefault();
} else if('cancelBubble' in ev) {
ev.cancelBubble = true;
}
}
</script>

<DIV id="divNav">
 <DIV id="divNavHeader"></DIV>
 <UL>
  <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" onclick="javascript: $(this).children().toggle();" id="liCurrentParentChild"><span class="plus">Parent1[+]</span><span class="minus">Parent1[&#8211]</span>
   <ul id="childCurrentList">
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" id="liCurrentChild"><a href="Parent1.aspx">Parent1</a></LI>
    <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('childHover');}, function() { $(this).removeClass('childHover');});" onclick="javascript: $(this).children('ul').toggle(); debugger; handleClick(event);" id="liCurrentParentGrandChild"><span class="plus">Parent1child1[+]</span><span class="minus">Parent1child1[&#8211]</span>
     <ul id="GrandChildrenList">
      <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" id="liCurrentgrandChild ><a href="Parent1child1.aspx">Parent1child1</a></LI>
      <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('grandchildHover');}, function() { $(this).removeClass('grandchildHover');});" ><a href="Parent1grandchild1.aspx">Parent1grandchild1</a></LI>
     </ul>
    </LI>
   </ul>
  </LI>
  <LI onMouseOver="javascript: $(this).hover(function() {$(this).addClass('parentHover');}, function() { $(this).removeClass('parentHover');});" ><a href="Parent2.aspx">Parent2</a></LI>

 </UL>
</DIV>

的CSS：

<style>
#childList { display: none; }
#GrandChildrenList { display: none; }

 .parentHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .childHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .grandchildHover, #hover-demo1 p:hover 
 { 
  background:  #CBCCC0;
 }

 .parentchildHover, #hover-demo1 p:hover 
 { 
  background:  #FFFFFF;
 }

 .minus { display: none; }

 .plus { display: inline; }

 .plus{ 
  color: #001A49; 
  padding: 3px 0px 3px 0px; 
  margin: 0 0 5px 0; 
  }

 .minus { 
  color: #001A49; 
  padding: 3px 0px 0px 0px; 
  margin: 0 0 0px 0; 
  }



#divNavHeader
{
  margin: 2px 0px 0 0px;
  padding: 5px 0px 5px 10px;
  background:#001A49;
  color: #FFFFFF;
  font-weight:600;
  width:260px;
}
#divNav
{
  margin: 2px 10px 0 0px;
  padding:0 0 0 0px;
  border:solid 1px #33333;
}

#divNav ul
{
 margin: -1px 0 0px 0px;
 padding:0px 0 0px 0px;
 cursor:pointer;
}

#divNav li
{    
 margin: 0px 4px 0px 4px;
 padding:3px 0 3px 10px;
 list-style-type: none; 
 border-top:solid 1px #333333;
} 

#divNav li ul /*{display: none;} */
{
 margin-top:3px;

} 

#liCurrent 
{
 background: #CBCCC0;
 color:#FFFFFF;
}

#liParentChild
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liParentChild .minus
{
 background: #ffffff;
 color:#001A49;
}

#liGrandChild .minus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentParentChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentgrandChild
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentChild .plus
{
 background: #ffffff;
 color:#001A49;
}

#liCurrentParentGrandChild .plus
{
 background: #ffffff;
 color:#001A49;
}


#liCurrentChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

#liCurrentgrandChild
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentgrandChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
} 
#liCurrentChild .minus
{
 background:#CBCCC0;
 color:#FFFFFF; 
}

/*


#divNav ul li:hover ,
#divNav ul li a:hover {                           
 display:block;
 position:relative;
 margin:0;
 top:15px;              
 left:30px;       
 height:auto;      
 width:13.5em;
 color:black;                        
 background:#999999        
}

#divNav  ul.li:hover ,
#divNav  ul.li a:hover  {    
 left:auto;
 right:0;         
}

* html #divNav  ul.li a:hover {         
 right:-1px;
}

#divNav li ul {display: none;} 
#divNav  li:hover > ul {display: block;} 
*/
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Answer 1

第1步：将所有Javascript分解为单独的文件。你正在使用jQuery，所以你的HTML中不应该浮动Javascript。

步骤2：如果您使用XHTML作为DOCTYPE，则需要我们li，而不是LI，因为大写标记名称在XML定义中是非法的。

第3步：正如Pointy所提到的，id必须是唯一的。关于如何使用id和class es，Here是一个很好的参考。为了使这更容易扩展，我会将这些名称更改为class es，因为它们是通用名称。我将假设您将从此处将其更改为class es。

假设以上所有人：

以下是一段快速代码，可让您了解应如何应对这种情况。

$('#divNav').delegate('liCurrentParentChild', 'click',
    function (e)
    {
        var $this = $(this); //This line allows you to not have to re-find 'this'
                             //in case you need to use it later in the function.
        var $children = $this.children(); //Same thing as the last line, but with
                                          //the children of $this.

        //Check first child element to see if it has been shown before.
        if('block' == $children.css('display'))
        {
            $children.hide();
        }
        else
        {
            $children.show();
        }
    }
);

Jquery toggle（）不适用于孙子孙女

1 个答案: