Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2016, 06:36
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

Изменить hover на click
Всем привет!
В меню есть поиск, при наведении выскакивает строка поиска, как сделать, что бы она по клику появлялась? Подскажите пожалуйста, где хотя бы начать поиск?
Ответить с цитированием
  #2 (permalink)  
Старый 22.02.2016, 07:38
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

maximamus,

Поменять :hover на .show, при клике переключать класс.

element.onclick = function() {
    this.classList.toggle('show');
};
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2016, 23:37
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

/******** DROPDOWNS ***********/

/* Main Dropdown */
$('.nav-top-link').parent().hoverIntent(
  function () {
       var max_width = '1080';
       if(max_width > $(window).width()) {max_width = $(window).width();}
       $(this).find('.nav-dropdown').css('max-width',max_width);
       $(this).find('.nav-dropdown').fadeIn(20);
       $(this).addClass('active');
       /* fix dropdown if it has too many columns */
       var dropdown_width = $(this).find('.nav-dropdown').outerWidth();
       var col_width =  $(this).find('.nav-dropdown > ul > li.menu-parent-item').width();
       var cols = ($(this).find('.nav-dropdown > ul > li.menu-parent-item').length) + ($(this).find('.nav-dropdown').find('.image-column').length);
       var col_must_width = cols*col_width;
       if($('.wide-nav').hasClass('nav-center')){
        $(this).find('.nav-dropdown').css('margin-left','-70px');
      }

       if(col_must_width > dropdown_width){
          $(this).find('.nav-dropdown').width(col_must_width);
          $(this).find('.nav-dropdown').addClass('no-arrow');
          $(this).find('.nav-dropdown').css('left','auto');
          $(this).find('.nav-dropdown').css('right',0);
          $(this).find('ul:after').remove();
       }
  },
  function () {
        $(this).find('.nav-dropdown').fadeOut(20);
        $(this).removeClass('active');
  }
);

/* Search dropdown */
$('.search-dropdown').hoverIntent(
  function () {
       if($('.wide-nav').hasClass('nav-center')){
          $(this).find('.nav-dropdown').css('margin-left','-85px');
        }
       $(this).find('.nav-dropdown').fadeIn(50);
       $(this).addClass('active');
       $(this).find('input').focus();

  },
  function () {
       $(this).find('.nav-dropdown').fadeOut(50);
       $(this).removeClass('active');
       $(this).find('input').blur();
  }
);


/* Other Dropdowns */
$('.prod-dropdown').hoverIntent(
  function () {
       $(this).find('.nav-dropdown').fadeIn(50);
       $(this).addClass('active');

  },
  function () {
       $(this).find('.nav-dropdown').fadeOut(50);
       $(this).removeClass('active');
  }
);

/* Cart Dropdown */
$('.cart-link').parent().parent().hoverIntent(
  function () {
       $(this).find('.nav-dropdown').fadeIn(50);
       $(this).addClass('active');

  },
  function () {
       $(this).find('.nav-dropdown').fadeOut(50);
       $(this).removeClass('active');
  }
);

/* WPML dropdown */
$('.menu-item-language-current').hoverIntent(
  function () {
       $(this).find('.sub-menu').fadeIn(50);

  },
  function () {
       $(this).find('.sub-menu').fadeOut(50);
  }
);


тут часть кода, там встречается стиль этот

,function(){/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)||($(this).find(".ux_banner:not(.is-selected) .ux-banner-video").trigger("pause"),$(this).find(".ux_banner.is-selected .ux-banner-video").trigger("play"));var t=$(this).find(".is-selected").outerHeight();t&&$(this).find(".flickity-viewport").css("height",t)}),$(".nav-top-link").parent().hoverIntent(function(){var t="1080";t>$(window).width()&&(t=$(window).width()),$(this).find(".nav-dropdown").css("max-width",t),$(this).find(".nav-dropdown").fadeIn(20),$(this).addClass("active");var e=$(this).find(".nav-dropdown").outerWidth(),i=$(this).find(".nav-dropdown > ul > li.menu-parent-item").width(),n=$(this).find(".nav-dropdown > ul > li.menu-parent-item").length+$(this).find(".nav-dropdown").find(".image-column").length,o=n*i;$(".wide-nav").hasClass("nav-center")&&$(this).find(".nav-dropdown").css("margin-left","-70px"),o>e&&($(this).find(".nav-dropdown").width(o),$(this).find(".nav-dropdown").addClass("no-arrow"),$(this).find(".nav-dropdown").css("left","auto"),$(this).find(".nav-dropdown").css("right",0),$(this).find("ul:after").remove())},function(){$(this).find(".nav-dropdown").fadeOut(20),$(this).removeClass("active")}),$(".search-dropdown").hoverIntent(function(){$(".wide-nav").hasClass("nav-center")&&$(this).find(".nav-dropdown").css("margin-left","-85px"),$(this).find(".nav-dropdown").fadeIn(50),$(this).addClass("active"),$(this).find("input").focus()},function(){$(this).find(".nav-dropdown").fadeOut(50),$(this).removeClass("active"),$(this).find("input").blur()}),$(".prod-dropdown, .cart-link").hoverIntent(function(){$(this).find(".nav-dropdown").fadeIn(50),$(this).addClass("active")},function(){$(this).find(".nav-dropdown").fadeOut(50),$(this).removeClass("active")}),$(".menu-item-language-current").hoverIntent(function(){$(this).find(".sub-menu").fadeIn(50)},function(){$(this).find(".sub-menu").fadeOut(50)}),$("a.off-canvas-overlay").magnificPopup({removalDelay:300,closeBtnInside:!0,callbacks:{beforeOpen:function(){this.st.mainClass="off-canvas "+this.st.el.attr("data-pos")+" "+this.st.el.attr("data-color")},


/* Custom Nav Walker */
class FlatsomeNavDropdown extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array()) {

        $display_depth = ($depth + 1); // because it counts the first submenu as 0
        if($display_depth == '1'){$class_names = 'nav-dropdown';}
        else {$class_names = 'nav-column-links';}

        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=".$class_names."><ul>\n";
    }

    function end_lvl( &$output, $depth = 1, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }

    function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Most of this code is copied from original Walker_Nav_Menu
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';


пробовал в этих менять, не получилось, что могу делать не так?
Ответить с цитированием
  #4 (permalink)  
Старый 23.02.2016, 23:45
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

вот скрин для наглядности
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить onclick на hover nat Элементы интерфейса 12 13.02.2014 15:38
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Заменить свойство click на hover, как? denjer Events/DOM/Window 1 06.09.2012 13:28
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28