javascript - Colorswitcher 更改样式 我希望它关闭

Question

我希望更改网站样式的 Colors-witcher 始终关闭，直到用户单击它，因为它隐藏了菜单，任何帮助将不胜感激:

我希望将其关闭为:

请提出任何建议。

HTML:

<div class="ec-colorswitcher">
    <a class="ec-handle" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
    <h3>Style Switcher</h3>
    <div class="ec-switcherarea">
        <div class="base-color">
            <h6>Background Color</h6>
            <ul class="ec-switcher">
                <li>
                    <a href="#" class="cs-color-1 styleswitch" data-rel="color-one"></a>
                </li>
                <li>
                    <a href="#" class="cs-color-7 styleswitch" data-rel="color-seven"></a>
                </li>                  
                <li>
                    <a href="#" class="cs-color-10 styleswitch" data-rel="color-ten"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

JavaScript:

(function($){
"use strict";
$(document).on('ready', function() {
    $('.styleswitch').click(function()
    {
        switchStylestyle(this.getAttribute("data-rel"));
        return false;
    });
    var c = readCookie('style');
    if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
    $('link[rel*=style][title]').each(function(i)  
    {
        this.disabled = true;
        if (this.getAttribute('title') == styleName) this.disabled = false;
    });




})(jQuery);

Answer 1

一种方法是向颜色切换器添加一个Closed 类并按如下方式操作它。尝试下面的演示:

$(document).on('ready', function() {
  // When the user clicks on the cog icon
  $('.ec-handle').click(function() {
    // Toggle the "closed" class of the color switcher
    $(this).closest('.ec-colorswitcher').toggleClass('closed');
    return false;
  });
  // When the user clicks on a color switch
  $('.styleswitch').click(function() {
    // Add the "closed" class to the color switcher
    $(this).closest('.ec-colorswitcher').addClass('closed');
    switchStylestyle(this.getAttribute("data-rel"));
    return false;
  });
  // Just for the demo
  function switchStylestyle(color) {
    $('body').css('background', color);
  }
});

/* Just for the demo, trying to imitate your style */
body{background:#1c84c6}.ec-colorswitcher{position:absolute;top:10px;left:0;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;box-shadow:0 0 5px rgba(0,0,0,.2)}.ec-colorswitcher h3{font-size:18px;line-height:40px;font-weight:400;padding:0 10px;margin:0}.ec-switcherarea{background:#fcfcfc;padding:5px 10px}.ec-switcherarea h6{font-weight:400;margin:0}.ec-switcher{list-style:none;padding:5px 0;margin:0}.ec-switcher li{display:inline-block}.styleswitch{display:block;background:#444;width:40px;height:30px}.cs-color-1{background:#555}.cs-color-7{background:#1c84c6}.cs-color-10{background:#ed5565}.ec-handle{display:block;background:#444;color:#fff;width:40px;height:40px;line-height:40px;text-align:center;font-size:22px;position:absolute;top:0;left:100%}

/* Add this so that when the color switcher
   has a "closed" class, nothing is shown
   except for the cog */
.ec-colorswitcher.closed>:not(.ec-handle) {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Notice the "closed" class here: -->
<div class="ec-colorswitcher closed">
    <a class="ec-handle" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a>
    <h3>Style Switcher</h3>
    <div class="ec-switcherarea">
        <div class="base-color">
            <h6>Background Color</h6>
            <ul class="ec-switcher">
                <li>
                    <a href="#" class="cs-color-1 styleswitch" data-rel="#555"></a>
                </li>
                <li>
                    <a href="#" class="cs-color-7 styleswitch" data-rel="#1c84c6"></a>
                </li>                  
                <li>
                    <a href="#" class="cs-color-10 styleswitch" data-rel="#ed5565"></a>
                </li>
            </ul>
        </div>
    </div>
</div>