PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
leshiy
Отправлено: 07 Октября, 2018 - 14:20:14
Post Id


Частый гость


Покинул форум
Сообщений всего: 164
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Есть 2 кнопки: Вывод поиска и Вывод категорий и при кликах по ним по отдельности все работает и показывается блок поиска и категорий и убирается но если допустим нажать кнопку поиска появится блок поиска и нажать кнопку категорий то блок поиска исчезнет и появиться блок категорий и на этом все перестает работать и блок категорий уже не убирается.
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <!doctype html>
  3. <html lang="ru">
  4. <head>
  5.     <meta charset="utf-8">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  7.  
  8. <script>
  9. $(document).ready(function () {
  10.    $('div[id^="b"]').click(function(){
  11. var $isk = $('.isk');
  12. var $cat = $('.cat-all');
  13. if(this.id=='b1'){
  14. var $v=$isk;
  15. }else if(this.id=='b2'){
  16. var $v=$cat;
  17. }
  18. if ($v.css('display') != 'block'){$v.slideDown('slow');var click = true;
  19.        $(document).bind('click.myEvent', function(b){
  20.            if (!click && $(b.target).closest($v).length == 0) {
  21.                $v.slideUp('slow');
  22.                $(document).unbind('click.myEvent');
  23.                }
  24.            click = false;
  25.        });
  26. }
  27.    });
  28.    
  29. });
  30. </script>
  31. </head>
  32. <body>
  33. <div style="width:500px;height:20px">
  34. <div id="b1" style="display:inline-block;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:aqua">ПОИСК</div>
  35. <div id="b2" style="margin-right:200px;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:green;float:left">КАТЕГОРИИ</div>
  36.     </div>
  37. <div class="cat-all" style="width:150px;display:none;text-align:center; height: 50px;position:absolute;margin:150px 0 0 20px;background-color: deeppink;">блок категорий</div>
  38. <div class="isk" style="display:none;width:150px;text-align:center; height: 50px;position:absolute;margin:150px 0 0 350px;background-color:teal;">блок поиска</div>
  39. </body>
  40. </html>
 
 Top
andrewkard
Отправлено: 07 Октября, 2018 - 23:52:26
Post Id


Участник


Покинул форум
Сообщений всего: 1245
Дата рег-ции: Нояб. 2014  


Помог: 23 раз(а)




Если правильно понял:
CODE (html):
скопировать код в буфер обмена
  1. <!doctype html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6.  
  7.     <script>
  8.         $(document).ready(function () {
  9.             $('.choose').click(function(){
  10.                 var target = $(this).attr('data-target');
  11.                 if($(this).hasClass('active')){
  12.                     $(this).removeClass('active');
  13.                     $('.'+target).slideUp('slow');
  14.                 }else{
  15.                     $(this).addClass('active');
  16.                     $('.'+target).slideDown('slow');
  17.                 }
  18.             })
  19.         });
  20.     </script>
  21.  
  22.     <style>
  23.         .main{
  24.             width:500px;
  25.             height:20px;
  26.         }
  27.         #b1{
  28.             display:inline-block;
  29.             width:100px;
  30.             height:20px;
  31.             border:1px solid #000;
  32.             text-align:center;
  33.             background-color:aqua;
  34.         }
  35.         #b2{
  36.             margin-right:200px;
  37.             width:100px;
  38.             height:20px;
  39.             border:1px solid #000;
  40.             text-align:center;
  41.             background-color:green;
  42.             float:left;
  43.         }
  44.         .categories{
  45.             width:150px;
  46.             display:none;
  47.             text-align:center;
  48.             height: 50px;
  49.             position:absolute;
  50.             margin:150px 0 0 20px;
  51.             background-color: deeppink;
  52.         }
  53.         .search{
  54.             display:none;
  55.             width:150px;
  56.             text-align:center;
  57.             height: 50px;
  58.             position:absolute;
  59.             margin:150px 0 0 350px;
  60.             background-color:teal;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65. <div class="main">
  66.     <div class="choose" id="b1" data-target="search">ПОИСК</div>
  67.     <div class="choose" id="b2" data-target="categories">КАТЕГОРИИ</div>
  68. </div>
  69. <div class="categories">Блок категорий</div>
  70. <div class="search">Блок поиска</div>
  71. </body>
  72. </html>
  73.  
 
 Top
leshiy
Отправлено: 08 Октября, 2018 - 10:58:30
Post Id


Частый гость


Покинул форум
Сообщений всего: 164
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Нет у Вас просто выводятся блоки при кликах по кнопкам.
А нужно что бы при клике по категориям всплывал блок категорий (а при клике в любом месте страницы кроме этого блока он бы закрывался) так же и для поиска.Это работает в моем коде но вот если выведен блок допустим с поиском то при клике по категориям блок поиска убирается и на этом все, дальше уже ничего не работает кроме первой нажатой кнопки поиска.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB