Как отключить элементы, когда я нажимаю на другой элемент?

У меня есть 5 кнопок социальных сетей в строке, 2 из которых имеют меню, которые запускаются jQuery slidetoggle. Проблема заключается в том, что при нажатии кнопки щебета она меняет значки по мере появления меню и сбивает их с ног. Как я могу предотвратить это?Как отключить элементы, когда я нажимаю на другой элемент?

Вот мой код:

$(".button").click(function() { 
 

 

 
    $(this).closest('.comment').find(".box").toggle(); 
 

 

 

 
});

#icons { 
 
    width: 450px; 
 
    padding: 0px!important; 
 
} 
 
.comment { 
 
    width: 140px; 
 
    float: right; 
 
} 
 
.button { 
 
    width: 25px; 
 
    display: inline; 
 
    margin-right: 5px; 
 
    vertical-align: top!important; 
 
    height: 25px; 
 
} 
 
.box { 
 
    margin-top: -20px; 
 
    width: 25px; 
 
} 
 
.box ul { 
 
    width: 80px; 
 
    height: 35px; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
} 
 
ul.tw { 
 
    border: 0px; 
 
} 
 
li.normal { 
 
    margin-right: 25px!important; 
 
    width: 80px; 
 
} 
 
li.tw { 
 
    margin-right: 60px; 
 
    width: 80px; 
 
} 
 
#hidden { 
 
    display: none; 
 
} 
 
li { 
 
    padding: 0!important; 
 
    list-style-type: none; 
 
    float: right; 
 
} 
 
a { 
 
    padding: 0 !important; 
 
    font-family: Arial; 
 
    font-size: 12px !important; 
 
    text-decoration: underline !important; 
 
    color: #000000 !important; 
 
    padding-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<body> 
 

 
<div id="icons"> 
 
    <div class="comment"> 
 
    <div class="button"> 
 
     <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png"> 
 
    </div> 
 
    <div class="box" id="hidden"> 
 
     <ul class="normal"> 
 
     <li class="normal"><a href="https://twitter.com/theoriginaldoc" target="_blank">DocJohnson</a> 
 

 
     </li> 
 
     <li class="normal"><a href="https://twitter.com/askthedocshow">Ask The Doc</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="comment"> 
 
    <div class="button"> 
 
     <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png"> 
 
    </div> 
 
    <div class="box" id="hidden"> 
 
     <ul class="tw"> 
 
     <li class="tw"><a href="https://twitter.com/theoriginaldoc" target="_blank">DocJohnson</a> 
 

 
     </li> 
 
     <li class="tw"><a href="https://twitter.com/askthedocshow">Ask The Doc</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="button"> 
 
     <a href="http://docjohnsonusa.tumblr.com/" target="_blank"> 
 
     <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" /> 
 
     </a> 
 
    </div> 
 
    <div class="button"> 
 
     <a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank"> 
 
     <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" /> 
 
     </a> 
 
    </div> 
 
    <div class="button"> 
 
     <a href="http://instagram.com/docjohnsonusa" target="_blank"> 
 
     <img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" /> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 

 
    </body>

Fiddle

источник

2015-07-31 Rachel Gallen

попытка поставить это меню с позицией абсолютной, она должна решить вашу проблему – Kup

вы пробовали позицию абсолютную? – Canvas

Должно быть связано с «относительной» позицией '.box'. Не забывайте, что * id * должен быть ** уникальным **. Вы должны добавить 'hidden' как * class * вместо * id *:' class = "box hidden" '. –

Не уверен, если это может привести к поломке вашего макета, но он работал, добавив position:absolute к #hidden элемента:

#hidden { 
    display:none; 
    position: absolute; 
    margin-top: -10px; 
}

Fiddle. Также добавлено margin-top: -10px, потому что .box значение -20px заставляло div перепрыгивать через кнопку.

источник

2015-07-31 14:56:41 DontVoteMeDown

Я вижу много несоответствий здесь.

Прежде всего спрятаться в класс. Он повторяется несколько раз, поэтому он не может быть идентификатором.

Тогда попробуйте:

.hidden 
{ 
    display: none; 
    position: absolute; 
    z-index: 1000; 
}

Я проверил его, и он работал.

источник

2015-07-31 14:56:07 Nick

Списки отображаются по умолчанию, если я использую ваше решение –

не уверен, что вы имеете в виду: http://jsfiddle.net/9jfk4Lca/ – Nick

это не тот ответ, который вы дали, то есть со скрытым как id все еще –

Я скопировал весь код на jsFiddle, все, что вам нужно сделать, это добавить position: absolute к вашему .box класса как так

jsFiddle: https://jsfiddle.net/g1Lfg7y5/

CSS

#icons { 
    width: 450px; 
    padding: 0px!important; 
} 
.comment { 
    width: 140px; 
    float: right; 
} 
.button { 
    width: 25px; 
    display: inline; 
    margin-right: 5px; 
    vertical-align: top!important; 
    height: 25px; 
} 
.box { 
    margin-top: -20px; 
    width: 25px; 
    position: absolute; 
} 
.box ul { 
    width: 80px; 
    height: 35px; 
    padding: 10px; 
    background-color: #fff; 
} 
ul.tw { 
    border: 0px; 
} 
li.normal { 
    margin-right: 25px!important; 
    width: 80px; 
} 
li.tw { 
    margin-right: 60px; 
    width: 80px; 
} 
#hidden { 
    display: none; 
} 
li { 
    padding: 0!important; 
    list-style-type: none; 
    float: right; 
} 
a { 
    padding: 0 !important; 
    font-family: Arial; 
    font-size: 12px !important; 
    text-decoration: underline !important; 
    color: #000000 !important; 
    padding-left: 10px; 
}

источник

2015-07-31 14:58:24 Canvas

Есть ряд вещей CSS, которые нужно исправить. Но главное - это комбинация позиции relative и absolute, чтобы сделать выпадающее меню правильно.

http://codepen.io/anon/pen/WvLwdx

#icons { 
text-align: center; 
} 
.comment { 
    display: inline-block; 
} 
.button { 
    position: relative; 
    display: inline-block; 
    margin-right: 5px; 
    vertical-align: top; 
} 
.box { 
    position: absolute; 
    top: 30px; 
    right: 0; 
} 
.box ul { 
    margin: 0; 
    background-color: #fff; 
} 
ul li { 
    display: block; 
} 
.hidden { 
    display: none; 
} 
a { 
    padding: 0 !important; 
    font-family: Arial; 
    font-size: 12px !important; 
    text-decoration: underline !important; 
    color: #000 !important; 
    padding-left: 10px; 
}

источник

2015-07-31 15:02:46

ваш код pen ведет к пустая страница –

Извините, я сейчас обновил код и очистил ненужный код и другие проблемы. –

хорошо, у вас все еще есть преимущество для ясного усилия! –

Как отключить элементы, когда я нажимаю на другой элемент?

ответ

Смежные вопросы