Question

我在静态网站上遇到了wordpress主题翻译。网站中的原始导航栏有一系列jquery和用于导航的自定义JavaScript。它为悬停和鼠标悬停事件制作了非常漂亮的动画过渡（并且客户端不想更改它）。

我想将导航栏换成较小的屏幕尺寸。所以我在我设置的媒体查询规则中添加了一些css但是custom.js文件仍然想要使用我的新导航栏，因为div id和/或类，这是在wordpress文件的php头文件中。

所以基本的问题是如何根据浏览器的大小交换div id或class？我原来的div是：

<div id="main_navigation" class="main-menu" role="navigation">
<?php html5blank_nav(); ?>
</div><!-- NAVIGATION CLOSE -->

非常感谢你的建议吗？

Answer 1

您可以通过jQuery .height()和.width()方法获取窗口高度。然后，您需要使用.attr('class')来获取类并进行任何类型的修改。像这样：

if(($(window).height()<anyHeight) && ($(window).width()<anyWidth)){
    $('#main_navigation').attr('class',nameOfTheNewClass);
}

不要忘记将此功能包装成$(document).ready或类似的东西，以确保它能够正确加载。

Answer 2

也许这个解决方案看起来很奇怪，但是如果你不能为较小的屏幕尺寸禁用custom.js文件，那么你必须确保在自定义之前执行任何更改导航html的脚本.js文件。它并不能保证一切都能顺利运行。

此解决方案使用html模板在服务器端创建导航。模板以页脚形式存储为'text/template'脚本。

将此wp_footer();调用放在footer.php文件中。

<script id="nav_menu_tpl" type="text/template">
<?php html5blank_nav(); ?>
</script>

将原始导航（<div id="main_navigation" ... </div>）替换为占位符：

<div id="navigation_placeholder"></div>

最后，将此脚本放在占位符下方（如果您愿意，可以使用wp_enqueue_script()加入）：

<script>
    jQuery(function ($) {
        // change to desired min value of screen
        if ( $(window).width() > 420 ) {
            // here we will replace the placeholder with navigation for large screens
            $( "#navigation_placeholder" ).replaceWith( '<div id="main_navigation" class="main-menu" role="navigation">' + $( '#nav_menu_tpl').html() + '</div>' );
        } else {
            // and here for smaller screens, change "<div id="main_navigation" class="main-menu" role="navigation">" with yours html
            $( "#navigation_placeholder" ).replaceWith( '<div id="main_navigation" class="main-menu" role="navigation">' + $( '#nav_menu_tpl').html() + '</div>' );
        }
    });         
</script>

这是相当灵活和简单的解决方案，因为现在您可以完全控制html。例如，您可以为不同的屏幕创建两个完全不同的模板，或者只修改导航的包装。

Answer 3

也许你可以使用jquery

这样的东西

if ($(window).width() < 440) {
    $('#main_navigation').removeClass('main_menu').addClass('name_of_class');
} else {
    $('#main_navigation').addClass('main_menu').removeClass('name_of_class');
}

为您想要成为屏幕宽度的任何值更改440。你要去除导航已经拥有的类.main-menu然后你将添加你自己的类来控制nav .name_of_class

在else语句中，你只是回到它的默认类。

您还可以在此处查看：http://api.jquery.com/addclass/

希望它有所帮助。

是否可以根据用户的屏幕大小有条件地更改div标签？

3 个答案: