Лента этого топика

Как сделать так, что бы список скрывался?

(Ответов: 3, Просмотров: 1017)
  1. Значок / Очков: 5 Значок / Очков: 5
    27.01.2014 20:14
    #1
    xilgiz вне форума
    xilgiz
    Гуру
    • Регистрация: 24.04.2011
    • Сообщений: 801
    • Репутация: 126
    Добрый вечер.
    В сайте
    http://contactlinzy.ru/
    В фильтре в шапке есть выпадающий список с чекбоксом смешанный.
    Так вот, нужно сделать так, что бы когда курсор убираем с выпадающей области, она скрывалась, или, если такое не возможно, оставить просто выпадающий список (выбрали одно - окно свернулось)

    Вот код фильтра

    Развернуть текст

    <?php if ($filters) { ?>
    <?function cmp($a, $b)
    {
    if ($a['name'] == $b['name']) {
    return 0;
    }
    return ($a['name'] < $b['name']) ? -1 : 1;
    }?>

    <noindex>
    <div class="box">
    <div class="box-content" style='background: rgb(88, 88, 88);padding: 2px;width: 584px;height:66px;position:relative;'>
    <?php foreach ($filters as $filter) { ?>
    <?php if (isset($filter['filters'])) { ?>
    <?php if ($filter['style_id'] == 'list') { ?>
    <div class="filter-item filter-item-list">
    <b><?php echo $filter['name']; ?></b>
    <ul>
    <?php foreach ($filter['filters'] as $filter_value) { ?>
    <?php if ($filter_value['count'] || !$count_enabled) { ?>
    <li><a href="<?php echo $filter_value['href']; ?>" <?php if($filter_value['active']) { ?>class="filter_active"<?php } ?> data-key="<?php echo $filter_value['key']; ?>" data-value="<?php echo $filter_value['value']; ?>"><?php echo $filter_value['name']; ?></a> <?php echo $filter_value['view_count']; ?></li>
    <?php } else { ?>
    <li><?php echo $filter_value['name']; ?> <?php echo $filter_value['view_count']; ?></li>
    <?php } ?>
    <?php } ?>
    </ul>
    </div>
    <?php } ?>
    <?php if ($filter['style_id'] == 'checkbox') { ?>
    <div class="filter-item filter-item-checkbox">
    <b><?php echo $filter['name']; ?></b>
    <ul>
    <?php foreach ($filter['filters'] as $filter_value) { ?>
    <?php if ($filter_value['count'] || !$count_enabled) { ?>
    <li><input type="checkbox" <?php if($filter_value['active']) { ?>checked="checked"<?php } ?>><a href="<?php echo $filter_value['href']; ?>" <?php if($filter_value['active']) { ?>class="filter_active"<?php } ?> data-key="<?php echo $filter_value['key']; ?>" data-value="<?php echo $filter_value['value']; ?>"><?php echo $filter_value['name']; ?></a> <?php echo $filter_value['view_count']; ?></li>
    <?php } else { ?>
    <li><input type="checkbox" disabled="disabled"><?php echo $filter_value['name']; ?> <?php echo $filter_value['view_count']; ?></li>
    <?php } ?>
    <?php } ?>
    </ul>
    </div>
    <?php } ?>
    <?php if ($filter['style_id'] == 'select') { ?>

    <div style='float: left;'>

    <table>
    <tr>
    <td style='text-align: right; padding-right: 10px;<?php if (($filter['name']=='Производитель')||($filter['name']=='Оптическая сила')) echo "width:115px"; ?> <?php if (($filter['name']=='Кривизна')||($filter['name']=='Диаметр')) echo "width:70px"; ?>'>
    <div style='font-size: 14px;color: #fff;'><?php echo $filter['name']; ?></div>
    </td>
    <td>
    <div class="filter-item filter-item-select" style='margin: 2px 0;'>
    <div class="filter-item-select-head" <?php if (($filter['name']=='Производитель')||($filter['name']=='Оптическая сила')) echo "style='width:170px;overflow:hidden;'"; ?> <?php if (($filter['name']=='Кривизна')||($filter['name']=='Диаметр')) echo "style='width:78px;overflow:hidden'"; ?>></div>
    <div class="filter-item-select-list">
    <ul>
    <?php
    $new_array = $filter['filters'];
    if (($filter['name']=='Оптическая сила')||($filter['name']=='Кривизна')||($filter['name']=='Диаметр'))
    {
    $temp_array = array();
    foreach ($filter['filters'] as $filter_value) {
    $temp_array[] = array(
    'count' => $filter_value['count'],
    'active' => $filter_value['active'],
    'view_count' => $filter_value['view_count'],
    'key' => $filter_value['key'],
    'value' => $filter_value['value'],
    'href' => $filter_value['href'],
    'image' => $filter_value['image'],
    'name' => (float)str_replace(",",".",$filter_value['name'])
    );
    }
    usort($temp_array, "cmp");
    $new_array = $temp_array;
    }

    ?>
    <?php foreach ($new_array as $filter_value) { ?>
    <?php if ($filter_value['count'] || !$count_enabled) { ?>
    <li><input type="checkbox" <?php if($filter_value['active']) { ?>checked="checked"<?php } ?>><a href="<?php echo $filter_value['href']; ?>" <?php if($filter_value['active']) { ?>class="filter_active"<?php } ?> data-key="<?php echo $filter_value['key']; ?>" data-value="<?php echo $filter_value['value']; ?>"><?php echo $filter_value['name']; ?></a> <?php echo $filter_value['view_count']; ?></li>
    <?php } else { ?>
    <li><input type="checkbox" disabled="disabled"><?php echo $filter_value['name']; ?> <?php echo $filter_value['view_count']; ?></li>
    <?php } ?>
    <?php } ?>
    </ul>
    </div>
    </div>
    </td>
    </table>

    </div>
    <?php } ?>

    <?php if ($filter['style_id'] == 'image') { ?>
    <div class="filter-item filter-item-image">
    <div class="filter-item-image-head"><?php echo $filter['name']; ?></div>
    <?php foreach ($filter['filters'] as $filter_value) { ?>
    <?php if ($filter_value['count'] || !$count_enabled) { ?>
    <a href="<?php echo $filter_value['href']; ?>" <?php if($filter_value['active']) { ?>class="filter_active"<?php } ?> data-key="<?php echo $filter_value['key']; ?>" data-value="<?php echo $filter_value['value']; ?>"><img src="<?php echo $filter_value['image']; ?>" alt="<?php echo $filter_value['name']; ?><?php echo $filter_value['view_count']; ?>" title="<?php echo $filter_value['name']; ?><?php echo $filter_value['view_count']; ?>"></a>
    <?php } else { ?>
    <img src="<?php echo $filter_value['image']; ?>" alt="<?php echo $filter_value['name']; ?><?php echo $filter_value['view_count']; ?>" title="<?php echo $filter_value['name']; ?><?php echo $filter_value['view_count']; ?>">
    <?php } ?>
    <?php } ?>
    </div>
    <?php } ?>
    <?php if ($filter['style_id'] == 'slider') { ?>
    <div class="filter-item filter-item-slider">
    <b><?php echo $filter['name']; ?></b>
    <div class="filter-item-slider-body">
    <input type="text" id="price" style="border:0; color:#f6931f; background:#fff; font-weight:bold;" class="filter_active" data-key="p" data-value="<?php echo $filter['filters'][0]['value'] . ',' . $filter['filters'][1]['value']; ?>" disabled="disabled" />
    <div id="slider-range" class="slider-range"></div>
    </div>
    <script>
    $(function() {
    if (/\Wp:[\d\.]+,[\d\.]+/.test(location.href)) {
    var myRe = /\Wp[\d\.]+),([\d\.]+)/;
    var priceFilterValue = myRe.exec(location.href);
    startValue = priceFilterValue[1];
    endValue = priceFilterValue[2];
    $("#price").attr('data-value', startValue + ',' + endValue);
    } else {
    startValue = <?php echo $filter['filters'][0]['value']; ?>;
    endValue = <?php echo $filter['filters'][1]['value']; ?>;
    }
    $( "#slider-range" ).slider({
    range: true,
    min: <?php echo $filter['filters'][0]['value']; ?>,
    max: <?php echo $filter['filters'][1]['value']; ?>,
    values: [ startValue, endValue ],
    slide: function( event, ui ) {
    $( "#price" ).val( "<?php echo $currency_symbol_left; ?>" + ui.values[ 0 ].toFixed(<?php echo $count_symbols; ?>) + "<?php echo $currency_symbol_right; ?> - <?php echo $currency_symbol_left; ?>" + ui.values[ 1 ].toFixed(<?php echo $count_symbols; ?>) + "<?php echo $currency_symbol_right; ?>" );
    },
    change: function( event, ui ) {
    /*var href = '<?php echo htmlspecialchars_decode($filter['filters'][0]['href']); ?>';
    var exp = /p:[\d\.,]+/g;
    href = href.replace(exp, "p:" + ui.values[ 0 ] + "," + ui.values[ 1 ]);
    location = href;*/
    $( "#price" ).attr("data-value", ui.values[ 0 ] + "," + ui.values[ 1 ]);
    }
    });
    $( "#price" ).val( "<?php echo $currency_symbol_left; ?>" + $( "#slider-range" ).slider( "values", 0 ).toFixed(<?php echo $count_symbols; ?>) +
    "<?php echo $currency_symbol_right; ?> - <?php echo $currency_symbol_left; ?>" + $( "#slider-range" ).slider( "values", 1 ).toFixed(<?php echo $count_symbols; ?>) + "<?php echo $currency_symbol_right; ?>" );
    });
    </script>
    </div>
    <?php } ?>
    <?php } ?>
    <?php } ?>
    <a id="filter_apply_button" class="button_filter" style='margin:0px;right: 8px;'><span><?php echo $text_apply; ?></span></a>
    <div style='clear:both'></div>
    </div>
    <div class="bottom">&nbsp;</div>
    </div>
    </noindex>
    <?php } ?>
    <script>
    $("#filter_apply_button").click(function(){
    var filter = '';
    var arr = {};
    $(".filter_active").each(function(i){
    var key = $(this).attr("data-key");
    var value = $(this).attr("data-value");
    if (arr[key] === undefined) {
    arr[key] = '';
    arr[key] += value;
    } else {
    arr[key] += ',' + value;
    }

    });

    $.each(arr, function(index,val){
    filter += index + ':' + val + ';';
    });
    filter = filter.substr(0, filter.length - 1);
    setUrl(filter);
    });

    function setUrl(filter) {
    var href = 'index.php?route=product/categoryfilter';
    var exp = /&filter=(.*?)(&|$)/g;
    href = href.replace(exp, "$2") + '&filter=' + filter;
    location = href;
    }

    function resetFilter() {
    var href = location.href;
    var exp = /(\?|&)filter=(.*?)(&|$)/g;
    href = href.replace(exp, "");
    location = href;
    }

    $(".filter-item-select-head").click(function(){
    $(".filter-item-select-list").not($(this).next(".filter-item-select-list")).hide();
    $(this).next(".filter-item-select-list").toggle();
    return false;
    });

    $(document).click(function(e){
    var $target = $(e.target);
    if (!$target.is("a") && !$target.is("input:checkbox")) {
    $(".filter-item-select-list").hide();
    }
    });

    $(".filter-item a").click(function(e){
    e.preventDefault();
    var var_this = $(this);
    $(this).toggleClass("filter_active");
    var checkbox = $(this).siblings("input:checkbox");
    if (checkbox.is(':checked')) {
    checkbox.attr('checked', false);
    } else {
    checkbox.attr('checked', true);
    }
    var arr = Array();
    $(this).parent().parent().find("a.filter_active").each(function( index ) {
    arr.push($(this).html());
    });
    var string = arr.join(';');

    var int_width = parseInt(var_this.parent().parent().parent().parent().css('width'));
    if (int_width == 172)
    var_this.parent().parent().parent().parent().find(".filter-item-select-head").html('<div style="width: 142px;float:left;overflow:hidden;">'+string+'</div><div class="filter-item-select-button"></div>');
    else
    var_this.parent().parent().parent().parent().find(".filter-item-select-head").html('<div style="width: 50px;float:left;overflow:hidden;">'+string+'</div><div class="filter-item-select-button"></div>');

    });

    $(".filter-item-select-list").each(function( index ) {
    var this_var_1 = $(this);
    var arr = Array();
    $(this).find("a.filter_active").each(function( index ) {
    arr.push($(this).html());
    });
    var string = arr.join(';');

    var int_width = parseInt(this_var_1.parent().find('.filter-item-select-head').css('width'));
    if (int_width == 170)
    this_var_1.parent().find(".filter-item-select-head").html('<div style="width: 140px;float:left;overflow:hidden;">'+string+'</div><div class="filter-item-select-button"></div>');
    else
    this_var_1.parent().find(".filter-item-select-head").html('<div style="width: 50px;float:left;overflow:hidden;">'+string+'</div><div class="filter-item-select-button"></div>');
    });


    $(".filter-item-checkbox input:checkbox, .filter-item-select input:checkbox").click(function(){
    $(this).siblings("a").toggleClass("filter_active");
    $(this).parents(".filter-item-select-list").show();
    });

    </script>
    [свернуть]


    Спасибо заранее))
    Спасибо не пишут, а нажимают
    • 0
  2. Значок / Очков: 5 Значок / Очков: 5
    29.01.2014 09:26
    #2
    xilgiz вне форума
    xilgiz
    Гуру
    • Регистрация: 24.04.2011
    • Сообщений: 801
    • Репутация: 126
    Никто не знает, или, работа трудная? Могу отблагодарить за помощь, если задание не очень простое...
    Спасибо не пишут, а нажимают
    • 0
  3. Значок / Очков: 5 Значок / Очков: 5
    29.01.2014 10:02
    #3
    Dolmatov вне форума
    Dolmatov
    А компот??!!
    • Регистрация: 28.11.2011
    • Сообщений: 2,067
    • Репутация: 720
    • Webmoney BL: ?
    В код не вникал, но на первый взгляд в css дописать

    .filter-item-select ul { display:none;

    .filter-item-select ul:hover { display:block;

    ---------- Сообщение добавлено 09:02 ---------- Предыдущее 09:01 ----------

    пиши в icq 396706 по шаманим!
    Вёрстка HTML+ CSS, установка модулей DLE
    Installpay.pro - монетизация файлового трафика
    • 1

    Спасибо сказали:
    xilgiz(29.01.2014),
  4. 29.01.2014 12:21
    #4
    earnkz вне форума
    earnkz
    Опытный Аватар для earnkz
    • Регистрация: 14.04.2011
    • Сообщений: 265
    • Репутация: 74
    • Webmoney BL: ?
    Если я правильно понял, вы хотите чтобы дивы с фильтрами, оформленные в виде селектов закрывались.
    В блок скрипта вставьте код:

    Код: 
    $('.filter-item-select-list').live('mouseleave', function() {
			$(".filter-item-select-list").hide();
		});
    к примеру в самом конце после:

    Код: 
    $(".filter-item-checkbox input:checkbox, .filter-item-select input:checkbox").click(function(){
		$(this).siblings("a").toggleClass("filter_active");
		$(this).parents(".filter-item-select-list").show();
    });
    Удобный мониторинг позиций | Лучший VPS хостинг, с беспл. админ. | Биржа контента без комиссии
    • 1

    Спасибо сказали:
    xilgiz(29.01.2014),

Тэги топика:

« Нужен специалист по вёртске IPB | Помогите с версткой »

Похожие темы

Темы Раздел Ответов Последний пост
Помогите сделать выпадающий список
 Web программирование 1 11.06.2013 11:00
Как сделать выпадющий список страниц на WP?
 WordPress 1 02.02.2012 16:12
Список припаратов
 Партнерские программы 3 19.04.2011 04:31
Список RU тизеров
 Партнерские программы 16 26.03.2011 22:04
(добавить баннер)

Баннеры



(добавить ссылку)

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Или перенести аккаунт с других форумов

Золотые темы форума

Все золотые темы

Популярные темы

Информеры