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

【问题标题】：Is it possible to conditionally change a div tag based on the screen size of the user?是否可以根据用户的屏幕大小有条件地更改 div 标签？
【发布时间】：2014-12-18 07:55:17
【问题描述】：

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

我想将导航栏换成更小的屏幕尺寸。因此，我在我设置的媒体查询规则中添加了一些 css，但由于 div id 和/或类是在 wordpress 文件的 php 标头中创建的，custom.js 文件仍然希望使用我的新导航栏。

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

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

非常感谢您的建议？

【问题讨论】：

您必须使用 CSS，特别是媒体查询/响应式网页设计。谷歌它并随时回来提出更具体的问题！
媒体查询如何阻止自定义 javascript 文件对其进行操作？

标签： jquery html css wordpress

【解决方案1】：

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

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

不要忘记将此函数包装到 $(document).ready 或类似的东西中，以确保正确加载它。

【讨论】：

【解决方案2】：

也许你可以在 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 然后您将添加自己的类来控制导航 .name_of_class

在 else 语句中，您只是回到原来的默认类。

您也可以在这里查看：http://api.jquery.com/addclass/

希望对你有帮助。

【讨论】：

你不需要在这些函数的类名前面添加点，你可能会得到奇怪的结果
我的错，没有注意到这些点。谢谢指正。
感谢您的帮助，但作为一个 JavaScript 新手，这对我来说很难，它几乎可以工作。我已经禁用了所有样式表，所以我得到的小浏览器窗口的结果是
。但是我的子菜单仍然是动画的，所以是否可以这样做并更改 div id 本身以应用修复。再次感谢。
你能显示你的导航的全部代码吗？它可能与默认动画中的某些类有关，您还需要删除它们。或者，也许您可以显示/隐藏一个或其他导航，具体取决于您的代码。

【解决方案3】：

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

此解决方案使用 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。例如，您可以为不同的屏幕创建两个完全不同的模板，或者只是修改导航的包装器。

【讨论】：

谢谢大师，我把脚本放在 custom.js 文件的顶部，终于让它发挥作用了。我非常感谢您的帮助，因为我有点担心版主告诉我这不是一个合适的问题。
@Asa，没问题，你的问题很好，如果你问我。