JQuery Аккордеонный заголовок с кнопкой jQuery UI icon (скрыть/показать + навести/щелкнуть)

Что мне нужно: фреймворк jQuery UI, такой как тот, который можно найти здесь: http://jqueryui.com/themeroller/ (посмотрите на Иконки Framework) в заголовок аккордеона jQuery.

Live Sample: http://www.nikollr3.three.axc.nl/

(Из того, что я понял, кнопка также может быть передразвана тегом Achor с правильным классом пользовательского интерфейса jQuery.)

Требования: Я не хочу, чтобы значок кнопки/показывался, когда заголовок НЕ выбран. С другой стороны, если заголовок выбран, и, следовательно, также отображается DIV, я хочу, чтобы значок/кнопка отображалась. Посмотрите на первое изображение слева, в этом состоянии я не хочу показывать кнопку "+". Во всех других изображениях (где он сфокусирован/выбран) я хочу, чтобы он отображался. В настоящее время НЕ выполняется; как это сделать?

- > Если кнопка нажата, я хочу, чтобы statProp отображался, у меня есть функция showStatProp() для этого.

Вопросы, которые возникают у меня сейчас: Наведение над 'button' ничего не делает, поскольку в настоящее время, когда выбран заголовок, тот же самый 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>

Ответы

Ответ 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");
});

Edit:

Чтобы исправить состояния по умолчанию и наведения кнопки, используйте этот 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);
}

Ответ 2

Важно, когда что-то связанное с javascript не работает, чтобы сначала проверить консоль на наличие ошибок.

При проверке консоли в вашей связанной демонстрации я заметил ошибку:

Uncaught SyntaxError: Неожиданный токен 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 ушел, либо вы всегда можете попробовать запустить ее через jsbeautifier.org/. Имейте в виду, что ошибки консоли всегда являются хорошим местом для начала.

Ответ 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;
}