Javascript代码不工作 - 在显示和隐藏的div

Question

我有以下的javascript

function toggle_profile(source, target) { 
    var ele = document.getElementById(target); 
    var text = document.getElementById(source); 
    if (ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "+ "; 
    } else { 
     ele.style.display = "block"; 
     text.innerHTML = "- "; 
    } 
} 

和下面是在html：

<c:forEach items="#{inventory.categories}" var="c"> 
     <a id="#{c.name}" href="javascript:toggle_profile(#{c.name}, #{c.name}div);">+ </a> 
<h:outputText value=" " /> 
     <h:commandLink action="#{inventory.getBooks(c)}" value="#{c.name}" style="font-weight: bold" /> 
     <br /> 
     <div id="#{c.name}div" style="display: none"> 
      <c:forEach items="#{c.subCategories}" var="s"> 
       <i> <h:commandLink action="#{inventory.getBooks(s)}" value="#{s.name}" /> 
       </i> 
       <br /> 
      </c:forEach> 
      <br /> 
     </div> 
    </c:forEach> 

的文本显示成功，但+链接什么也不做。

Answer 1

试图改变你下面的JavaScript功能，

function toggle_profile(source, target) { 
var ele = document.getElementById(target); 
var text = document.getElementById(source); 
if (ele.style.display == "none") { 
    ele.style.display = "block"; 
    text.innerHTML = "- "; 
} else { 
    ele.style.display = "none"; 
    text.innerHTML = "+ ";  
} 

}

Answer 2

您以错误的方式使用<h:commandLink>。首先，它没有href属性：它将由JSF生成并始终为#，所以实际上你的JS代码永远不会被称为。其次，它被设计为通过绑定的onclick处理程序发布表单，而不是执行一些JavaScript操作。

要做你想做的事情，只需使用一个普通的HTML a元素，或者甚至一个div与指定的onclick处理程序。