带有 jQuery UI 图标按钮的 jQuery Accordion 标题（隐藏/显示 + 悬停/单击）答案

【问题标题】：jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)带有 jQuery UI 图标按钮的 jQuery Accordion 标题（隐藏/显示 + 悬停/单击）
【发布时间】：2013-12-12 13:56:32
【问题描述】：

我需要什么：一个 jQuery UI 框架按钮，可以在此处找到：http://jqueryui.com/themeroller/（查看框架图标）在 jQuery 手风琴标题中。

现场样例：http://www.nikollr3.three.axc.nl/

（据我了解；一个按钮也可以通过带有正确 jQuery UI 类的 Achor 标签来模仿。）

要求：我不希望在当前未选择标题时显示按钮/图标。另一方面，如果选择了标题，因此也显示了它的 DIV，我希望显示图标/按钮。看左边的第一张图片，在那种状态下，我不想显示“+”按钮。在所有其他图像（聚焦/选择的地方）中，我确实希望显示它。目前尚未实施；如何做到这一点？

-> 如果单击按钮，我希望显示 statProp，为此我有一个函数 showStatProp()。

我目前遇到的问题： 悬停在“按钮上”不是做任何，因为当前选择标题时，同样的CSS是以某种方式应用于标题的按钮（看按钮的横向颜色：黑暗灰色到黑色）（没有单独的悬停）。

如何做到这一点？我目前陷入困境，因为在互联网上找到的关于我正在尝试的特定事情的文档/信息有限。

function showStatProp()
            {
                if(document.getElementById("statProp").style.display == "none")
                {
                    document.getElementById("statProp").style.display = 'block';
                }
                else
                {
                    document.getElementById("statProp").style.display = 'none';
                }
            }

HTML：

<body onkeydown="controlCheck(event)" onkeyup="clearPress()" >
        <div id="application" style="position:absolute">
            <div id="accordion">
                 <h3 id="clickStat">Stations
                 <span style="float:right;" class="ui-state-default ui-corner-all">
                <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a>
                </span></h3>
                 <div id="stations">
                    <input type="text" id="stations_ac" onclick="this.value='';" />
                     <div id="selectedStationDiv">
                     </div>
                    <hr>
                        <div id="statProp" style="display:none;">
                    <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p>
                    <p style="margin-top:15px">
                    Type:
                    <select id ="statTyp" style ="float:right" onchange="">
                    <option></option>
                    <option title="Test">T</option>
                    </select>
                    </p>    
                    <p style="margin-top:15px">
                    Admtyp:
                    <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()">
                    <option></option>
                    <option title="Alarm">A</option>
                    <option title="Alarm">D</option>
                    <option title="Urgent alarm">U</option>
                    </select>
                    </p>
                    <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p>

                    <p id="devText">Text:
                    <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p>
                    <p>
                    <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p>
                    <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button>
                        </div>

                </div>                                          

                <h3 id="clickImages" onclick="listImages()">Images</h3>
                <div id="imagesList" style="overflow:auto">

                    <ul id='imagesUL'></ul>
                <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button>
                </div>

【问题讨论】：

一个活生生的例子会很有帮助
@ZachSaucier 任何提示都将不胜感激
我不太能够理解您的问题以帮助您（并假设其他人）。您能否通过“我不希望当前未选择标题时显示按钮/图标”来扩展您的意思。是否有机会绘制您想要的最终解决方案的线框？
@Hady 看看左边的第一张图片，在那个统计中我不想显示“+”按钮。在所有其他图像（聚焦/选择的地方）中，我确实希望显示它。

标签： javascript jquery html css jquery-ui

【解决方案1】：

我猜你想要这样的东西：

http://jsfiddle.net/mali303/gxemn34h/

我为按钮添加了一个 CSS 类“动作按钮”。要在折叠状态下隐藏按钮，请使用此 CSS：

#accordion .action-button {
    float: right;
    display: none;
}
#accordion .ui-state-active .action-button {
    display: inline;
}

添加悬停效果：

$('#accordion .action-button').hover(
    function() {
        $(this).addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover');
    }
);

要使按钮可点击，请使用以下内容：

$('#accordion .action-button a').click(function () {
    self.location.href = $(this).attr("href");
});

编辑：

要修复按钮的默认和悬停状态，请使用以下 CSS： http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
}
#accordion .action-button.ui-state-hover .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);
}

【讨论】：

嘿，伙计，这看起来很棒！，一个评论虽然加号在未聚焦时为黑色，而不是灰色（或深灰色）（与未聚焦的手风琴标题一致）它应该只在以下情况下为黑色专注，这很容易解决吗？
我很欣赏你在这方面所做的工作，这是一流的！但是不知何故，我的网站拒绝将状态 .ui-state-hover 提供给操作按钮，而它只是为 H3 标头执行此操作..我不明白这一点！
@Faarbhurtz 你能提供你网站的链接吗？
JSfiddle 链接坏了..):

【解决方案2】：

当某些与 javascript 相关的东西无法正常工作时，首先检查控制台是否有错误很重要。

在您链接的演示中检查控制台时，我发现一个错误：

Uncaught SyntaxError: Unexpected token ILLEGAL

它指向这行代码（通过检查第 1000 行）

var jDescriptions= ["<br />
<b>Warning</b>:  implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br />
"];

这意味着您有某种导致问题的 unicode 字符。也许它导致换行符。无论哪种方式，结果都是一个开放式字符串和一个错误，该错误使该行之后正在检查的代码无效。以下不执行的代码是页面的大部分脚本。

我建议您手动输入此行以确保 unicode 消失，或者您始终可以尝试通过 jsbeautifier.org/ 运行它。请记住，控制台错误始终是一个很好的起点。

【讨论】：

嘿，我删除了我的一些 php 代码，因为我无法共享那段代码，显然我忘记删除对 php 变量的引用。这绝对不会对我造成问题。今晚我将删除参考。谢谢

【解决方案3】：

您可以做一个仅基于 CSS 的解决方案。

如果您检查从您正在使用的库生成的 HTML，您会注意到当一个按钮是：

悬停，使用ui-state-hover类
选中，使用ui-state-active类
未选择，以上两个类均未使用

利用上面的理解，你可以默认隐藏编辑站按钮（加号图标），只在悬停或选中时才可见：

#clickStat span.ui-state-default {
    display: none;
}

#clickStat.ui-state-hover span.ui-state-default, 
#clickStat.ui-state-active span.ui-state-default {
    display: block;
}

【讨论】：