Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2017, 10:51
Новичок на форуме
Отправить личное сообщение для Виктор3177 Посмотреть профиль Найти все сообщения от Виктор3177
 
Регистрация: 14.02.2017
Сообщений: 5

Закрытие div блока по другой кнопке
Всем добрый день!

В Java я пока новичок и нужна ваша помощь.

Есть блок, который открывается по нажатию кнопки и закрывается по этой же кнопке.

Как сделать, чтобы блок закрывался по другой ссылке (кнопке), которая будет находиться внизу блока. Так как контент иногда внутри блока бывает большой и чтобы его закрыть, надо подниматься наверх, а это не удобно.

Вот сам скрипт
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() {
    $("#menu ul:visible").slideUp("normal");
    if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
        $(this).next().slideDown("normal");
    }
});
});
</script>


Спасибо за внимание.
Изображения:
Тип файла: jpg clos-btn.jpg (23.0 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2017, 10:57
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,210

Сообщение от Виктор3177
В Java я пока новичок
Тут JavaScript...
Сообщение от Виктор3177
Есть блок, который открывается по нажатию кнопки и закрывается по этой же кнопке.
Вместо описания нужно делать тестовый хтмл пример. На нем можно показать как и чего...
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2017, 11:18
Новичок на форуме
Отправить личное сообщение для Виктор3177 Посмотреть профиль Найти все сообщения от Виктор3177
 
Регистрация: 14.02.2017
Сообщений: 5

Могу дать тестовый html, где есть всё.
Вложения:
Тип файла: zip testovij.zip (1.6 Кб, 1 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2017, 12:53
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
.tab-block{
    overflow: hidden;
    padding: 20px 0;
    background: #555;
    border: 1px solid #000;
}
.tab-left{
    float: left;
    width: 49%;
    text-align: center;
}
.tab-right{
    float: right;
    width: 49%;
    text-align: center;
}
#menu li span{
    color: #e31e24;
    font-size: 19px;
    font-family: 'Play', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #e31e24;
    border-radius: 10px;
}
.tab-block p{
    color: #fff;
}
ul#menu, ul#menu ul{
  list-style:none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  -moz-box-shadow:0px 0px 5px 0px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
}
ul#menu a,ul#menu span{
    text-decoration: none;
}
ul#menu li {
    margin-top: 1px;
}
ul#menu li a,ul#menu li span{
    padding: 7px;
    cursor: pointer;
}
ul#menu li ul li a{
  background: #eee;
  color: #000;
  padding-left: 20px;
}
ul#menu li ul li a:hover{
    background: #ddd;
}
.tab-block ul div{
    background: #888;
    border: 1px solid #000;
}

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#menu ul").hide();
   $("#menu li span").click(function() {
       $("#menu ul:visible").slideUp("normal");
       if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
           $(this).next().slideDown("normal");
       }
   });
   $('.btn-close').click(function() {
       $(this).parents('li').find('span').click();
   });
});
</script>
   <div class="tab-block">
        <ul id="menu">
            <li class="tab-left"><span>Сертификаты</span>
                <ul style="margin: 30px -105% 0 0;">
                    <div>
                      <a class="example-image-link" href="#" >1</a><br>
                      <a class="example-image-link" href="#" >2</a><br>
                      <a class="example-image-link" href="#" >3</a><br>
                      <a class="example-image-link" href="#" >4</a><br>
                      <a class="example-image-link" href="#" >5</a><br>
                      <a class="example-image-link" href="#" >6</a><br>
                      <button class='btn-close'>Close</button>
                    </div>
                </ul>
            </li>
            <li class="tab-right"><span>Благодарности</span>
                <ul style="margin: 30px 0 0 -100%;">
                    <div>
                      <a class="example-image-link" href="#" >11</a><br>
                      <a class="example-image-link" href="#" >22</a><br>
                      <a class="example-image-link" href="#" >33</a><br>
                      <a class="example-image-link" href="#" >44</a><br>
                      <a class="example-image-link" href="#" >55</a><br>
                      <a class="example-image-link" href="#" >66</a><br>
                      <button class='btn-close'>Close</button>
                    </div>
                </ul>
            </li>
        </ul>
    </div>
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2017, 13:04
Новичок на форуме
Отправить личное сообщение для Виктор3177 Посмотреть профиль Найти все сообщения от Виктор3177
 
Регистрация: 14.02.2017
Сообщений: 5

Огромное СПАСИБО!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ктивация одного блока через другой zerofx Элементы интерфейса 6 14.01.2014 00:28
В div не подгружается контент с другой страницы ms_AmneZia Общие вопросы Javascript 18 03.07.2013 17:23
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 14:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 19:25