![](/img/trans.png)
[英]How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS
[英]swap triangle icons when doing expanding/collapsing divs with Javascript/CSS
我需要使用 CSS 根据切换来交换图标和文本。 最初,功能区将被隐藏。 如何根据我的 JavaScript 分配的 css 类进行图标和文本交换? 推拉门是一种技术吗?
HTML:
<div id="ribbonHide">
<a class="toolTipHover" href="#">
<div class="downArrowSmall">
<span class="ribbonHideToolTipOpen">Display the Ribbon</span>
<span class="ribbonHideToolTipClose">Hide the Ribbon</span>
</div>
</a>
</div>
JavaScript:
$('.toolTipHover > div').on('click', function() {
$('#s4-ribbonrow').toggle();
$(this).toggleClass('downArrowSmall upArrowSmall');
FixRibbonAndWorkspaceDimensions();
});
添加更多上下文可能很有用,但这是我对您需要的猜测。 你至少应该使用一个函数(编辑:我看到你现在使用绑定)来切换一切,我会使用一个跨度,所以是这样的:
<script type="text/javascript">
function ToggleArrow(arrow)
{
$('#s4-ribbonrow').toggle();
$(arrow).toggleClass('downArrowSmall upArrowSmall');
if($('#s4-ribbonrow').is(":visible"))
{
$(arrow).children(".ToolTip").html("Hide the Ribbon");
}
else
{
$(arrow).children(".ToolTip").html("Display the Ribbon");
}
FixRibbonAndWorkspaceDimensions();
}
</script>
<div id="ribbonHide">
<div class="downArrowSmall" onclick="ToggleArrow(this)">
<span class="ToolTip">Display the Ribbon</span>
</div>
</div>
首先删除内联脚本......
块级元素也不应该嵌套在内联元素中..意味着它是不合法的,但它可能会在以后出现问题..
// Select the immediate Div's inside the anchors
$('.toolTipHover > div').on('click', function() {
$('#s4-ribbonrow').toggle();
$(this).toggleClass('downArrowSmall upArrowSmall'); // Toggle class
FixRibbonAndWorkspaceDimensions();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.