CODE (htmlphp):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <!doctype html>
- <html lang="ru">
- <head>
- <meta charset="utf-8">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script>
- $(document).ready(function () {
- $('div[id^="b"]').click(function(){
- var $isk = $('.isk');
- var $cat = $('.cat-all');
- if(this.id=='b1'){
- var $v=$isk;
- }else if(this.id=='b2'){
- var $v=$cat;
- }
- if ($v.css('display') != 'block'){$v.slideDown('slow');var click = true;
- $(document).bind('click.myEvent', function(b){
- if (!click && $(b.target).closest($v).length == 0) {
- $v.slideUp('slow');
- $(document).unbind('click.myEvent');
- }
- click = false;
- });
- }
- });
- });
- </script>
- </head>
- <body>
- <div style="width:500px;height:20px">
- <div id="b1" style="display:inline-block;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:aqua">ПОИСК</div>
- <div id="b2" style="margin-right:200px;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:green;float:left">КАТЕГОРИИ</div>
- </div>
- <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>
- <div class="isk" style="display:none;width:150px;text-align:center; height: 50px;position:absolute;margin:150px 0 0 350px;background-color:teal;">блок поиска</div>
- </body>
- </html>