рони огромное спасибо вам за помощь!
Попробовал использовать в Wordpress упрощённный код из вашего поста #5.
Однако не получается
Я уже упоминал в соседней теме, что пытаюсь заставить открываться и закрываться в меню форму поиска, как в меню на этом сайте: http://algolux.com/news/. При этом в моём случае плавная анимация не нужна, и мне теперь уже безразлично, что будет использоваться - чистый js или jquery. Лишь бы работало.
Сейчас выдрал из своего тестового сайта http://cosmetic.besaba.com/ кусок меню с текстовой кнопкой "Поиск" и формой поиска.
Код вместе с вашим скриптом из поста #5, в который я подставил свои классы, привожу ниже.
Для наглядности, в коде ниже и на сайте, чтобы видеть как выглядит форма поиска, свойство visibility: hidden в диве box закомментировано. Но убираю комментирование, форма становится невидимой, тыкаю в Поиск и ничего не происходит.
!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a.search-link {
cursor: pointer;
text-transform: uppercase;
/* font-family: IcoMoon; */
}
.box {
font-size: 0;
left: 100px;
padding: 10px;
margin-left: 10px;
position: absolute;
right: 0;
text-align: right;
width: 300px;
z-index: 99999;
/* visibility: hidden; */
}
.box.show { visibility: visible; opacity: 1; }
ul{
list-style-type: none;
}
li{
display: inline-block;
margin: 0 2.85714rem 0 0;
position: relative;
}
</style>
<script>
function init()
{
var form = document.getElementById('box'), tel = document.getElementById('search-link');
document.onclick = function(event) {
var elem = event.target;
event.target === tel && form.classList.toggle("show");
if (elem === form || form.contains(elem) || event.target === tel) return false;
form.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<ul>
<li>
<a id="main-nav-search-link" class="search-link">Параллакс</a>
</li>
<li>
<a id="main-nav-search-link" class="search-link">Поиск</a>
<div class="box">
<form class="menu-search-form" action="http://cosmetic.besaba.com/" method="get">
<p>
<input id="s" class="text" type="text" onblur="if (this.value == '') {this.value = 'Кто Ищет, Тот Найдет !';}" onfocus="if (this.value == 'Кто Ищет, Тот Найдет !') {this.value = '';}" name="s" value="Кто Ищет, Тот Найдет !">
<input id="searchsubmit" class="my-wp-search" type="submit" value="Искать">
</p>
</form>
</div>
</li>
</ul>
</body>
</html>
Нашёл ещё один ваш вариант: http://javascript.ru/forum/jquery/54576-problema-s-toogleclass-pri-vydelenii-aktivnojj-sylki-po-nazhatiyu.html#post362759.
Но там лишний код для моего случая и navbar bootstrap используется.