菜单图标位置不同

Question

我在菜单图标搜索中使用 wordpress 搜索工具栏中的显示。 Wordpress 主题使用简单的 js 自定义文件。这都是关于网站和菜单的。但是对于时事通讯，我已经订阅了插件时事通讯。

如果你看到菜单图标位置visit website here

我的问题是：我想阻止在菜单栏中的图标搜索和简报图标相同的位置。现在，如果您单击搜索图标，您将看到更改时事通讯的位置。

这是我的 js 文件：

jQuery(document).ready(function( $ ) { 

    //Javascript Detection
    $('body').removeClass('no-js');     
    //Read More Link
    function readmorelink() {
        $('a.more-link').closest('p').css('text-align', 'center');
    }
    readmorelink();

    //Flexslider
    function flexslider() {
        $('.flexslider').flexslider({
            animation: "fade",
            slideshow: false,
        });

        $(".flex-next").html('<i class="icon-chevron-right"></i>');
        $(".flex-prev").html('<i class="icon-chevron-left"></i>');
    }
    flexslider();
        //Fitvid
    function fitvids() {
        $(".featured-preview").fitVids();   
    }
    fitvids();  

    //Comments Toggle
    $(".comments-wrapper").hide();
    $("#comments-title").attr('class', 'comments-close');

    $("#comments-title").toggle(function () {
        $(".comments-wrapper").slideDown();
        $(this).attr('class', 'comments-open');
        $('html, body').animate({
            scrollTop: $("#comments-title").offset().top
        }, 0);
        return false;
    }, function (){
        $(".comments-wrapper").slideUp();
        $(this).attr('class', 'comments-close');
        return false;
    })  

    //Infinite Scroll
    if ((custom_js_vars.infinite_scroll) == 'no') { 

    } else { 
        $('.posts').infinitescroll({
              loading: {
                  msgText: "...Loading Posts...",
                  finishedMsg: "- End of Posts -"
              },
              nextSelector: '.post-nav-next a',
              navSelector: '.post-nav',
              itemSelector: 'article',
              contentSelector: '.posts',
              appendCallback: true
        },function () { 
            fitvids();
            readmorelink();
            flexslider();
        });     
    }



    $( ".icon-medium.icon-search" ).click(function() {
      $(".nksub-tab-icon").toggleClass("newClass");
    });

    $( ".icon-medium.icon-search" ).click(function() {
        $(".nksub-tab-icon").delay(1000).queue(function(next){
            $(this).toggleClass("newClass");
            next();
        });
    });

    //Cabinet Toggle
    $('#cabinet-toggle, #cabinet-toggle-mobile').click(function () {            
        $("#cabinet-slider").slideToggle(0);
        $(".icon-plus-sign").attr('class', 'icon-minus-sign');
        return false;
    }, function () {
        $("#cabinet-slider").slideToggle(0);

        $(".icon-minus-sign").attr('class', 'icon-plus-sign');
        return false;
    });     
    //Responsive Menu
    $('.nav').mobileMenu();

    $('select.select-menu').each(function(){
        var title = $(this).attr('title');
        if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
        $(this)
            .css({'z-index':10,'-khtml-appearance':'none'})
            .after('<span class="select"></span>')
    });
});

Answer 1

在你的 CSS 中，你有这个：

body:not([class*=nksub_mobile]) .nks_cc_trigger_tabs.nksub_tab {
    top: 327px !important;
   }

这将使图标始终显示在距屏幕顶部 327 像素处。因此，当您单击搜索图标时，搜索字段会显示在顶部，而 327 像素不足以使电子邮件通讯图标与搜索图标保持在同一水平。

解决方法：在您的：

$( ".icon-medium.icon-search" ).click(function() {
  $(".nksub-tab-icon").toggleClass("newClass");
  });

在上述函数中，将一些 CSS 类添加到您的时事通讯选择器中以调整位置。大约 327 像素 + 顶部显示的搜索框的高度。

希望这会有所帮助！