Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменить hover на click (https://javascript.ru/forum/dom-window/61521-izmenit-hover-na-click.html)

maximamus 22.02.2016 06:36

Изменить hover на click
 
Всем привет!
В меню есть поиск, при наведении выскакивает строка поиска, как сделать, что бы она по клику появлялась? Подскажите пожалуйста, где хотя бы начать поиск?

ruslan_mart 22.02.2016 07:38

maximamus,

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

element.onclick = function() {
    this.classList.toggle('show');
};

maximamus 23.02.2016 23:37

/******** 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        ) .'"' : '';


пробовал в этих менять, не получилось, что могу делать не так?

maximamus 23.02.2016 23:45

вот скрин для наглядности


Часовой пояс GMT +3, время: 03:23.