【问题标题】:Problem with a dropdown. The same code PHP generates a different CSS in two cases下拉菜单有问题。相同的代码PHP在两种情况下生成不同的CSS
【发布时间】:2020-05-13 16:57:38
【问题描述】:

示例: https://www.freuciv.com/test/

菜单栏上有明暗模式开关。当您将鼠标悬停在它上面时,会出现一个下拉菜单。这个按钮的PHP代码是:

<?php
$bimber_class = array(
    'g1-drop',
    'g1-drop-nojs',
    'g1-drop-before',
    'g1-drop-the-skin',
    'g1-drop-the-skin-' . bimber_get_theme_option( 'global', 'skin' ),
);
$bimber_class = array_merge(
    $bimber_class,
    explode( ' ', bimber_hb_get_element_class_from_settings( 'skin_dropdown', false ) )
);
$bimber_class = array_filter( $bimber_class );
?>
<div class="<?php echo implode( ' ', array_map( 'sanitize_html_class', $bimber_class ) ); ?> g1-dropable g1-column">
    <button class="g1-button-none g1-drop-toggle">
        <span class="g1-drop-toggle-icon"></span><span class="g1-drop-toggle-text"><?php esc_html_e( 'Switch skin', 'bimber' ); ?></span>
        <span class="g1-drop-toggle-arrow"></span>
    </button>
    <?php if ( bimber_get_theme_option( 'header_builder', 'element_content_skin_dropdown' ) ) : ?>
        <div class="g1-drop-content">
            <?php if ( 'dark' ===  bimber_get_theme_option( 'global', 'skin' ) ) : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that\'s kinder on your eyes at day time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that\'s kinder on your eyes at night time.', 'bimber' ); ?></p>
            <?php else : ?>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the dark mode that\'s kinder on your eyes at night time.', 'bimber' ); ?></p>
                <p class="g1-skinmode-desc"><?php esc_html_e( 'Switch to the light mode that\'s kinder on your eyes at day time.', 'bimber' ); ?></p>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

<?php wp_enqueue_script( 'bimber-skin-mode' ); ?>

我复制了这段代码并将其放在页面中间。 为什么下拉菜单只出现在顶部开关? 我注意到第二种情况下的 div.g1-drop-content 具有完全不同的样式列表。这是什么原因?

【问题讨论】:

  • 所有css都链接在两个页面中?
  • 这不是下拉菜单。它在 Html 中称为“工具提示”。只是您无法在中心按钮中看到它,因为工具提示类未应用于它。要实现该工具提示,请从位于您网站顶部的按钮中找到工具提示类,复制该类并将其粘贴到您的中心按钮元素。您可以在此处阅读有关工具提示的更多信息:w3schools.com/bootstrap/bootstrap_tooltip.asp
  • @noobprogrammer 感谢您的回答。这是一个非常有价值的线索。对不起,但我想我不明白。如果我只需将“工具提示”粘贴到按钮中:&lt;button class="g1-button-none g1-drop-toggle tooltip"&gt; 它不起作用。
  • @SimoneRossaini 我想是的。

标签: javascript php html css bootstrap-4


【解决方案1】:

谢谢。解决了。 A colleague from wordpres.org helped. 'g1-dropable' 类丢失了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-09-22
    • 1970-01-01
    • 1970-01-01
    • 2014-05-02
    • 1970-01-01
    • 2023-04-03
    • 2015-02-11
    • 1970-01-01
    相关资源
    最近更新 更多