Question

所以我使用jquery minicolors并设置我需要的方式，但有一个问题。页面加载时，颜色选择器已显示。只应在选择输入框时显示。设置不会改变任何东西，也不会改变JS中的任何内容。我在这做错了什么？我附上以下代码：

我的HTML：

<div class="col-sm-2">
  <label data-toggle="tooltip" for="borderColor" title=
  "Enter a Color for the Border (Hexidecimal)"><span class=
  "glyphicon glyphicon-question-sign tip"></span>&nbsp;Border Color</label>

  <div class=
  "minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-right">
  <div class=
  "minicolors minicolors-theme-bootstrap minicolors-position-bottom minicolors-position-right minicolors-focus">
    <input class="form-control demo minicolors-input" id="text-field" size="7"
      type="text"> <span class=
      "minicolors-swatch minicolors-sprite"><span class=
      "minicolors-swatch-color" style=
      "background-color: rgb(86, 163, 52);"></span></span>

      <div class="minicolors-panel minicolors-slider-hue" style=
      "display: block; opacity: 1;">
        <div class="minicolors-slider minicolors-sprite">
          <div class="minicolors-picker" style="top: 107.916666666667px;">
          </div>
        </div>

        <div class="minicolors-opacity-slider minicolors-sprite">
          <div class="minicolors-picker"></div>
        </div>

        <div class="minicolors-grid minicolors-sprite" style=
        "background-color: rgb(77, 255, 0);">
          <div class="minicolors-grid-inner"></div>

          <div class="minicolors-picker" style="top: 62px; right: 57px;">
            <div></div>
          </div>
        </div>
      </div>
    </div><span class="minicolors-swatch minicolors-sprite"><span class=
    "minicolors-swatch-color" style=
    "background-color: rgb(112, 194, 74);"></span></span>

    <div class="minicolors-panel minicolors-slider-hue" style=
    "display: none; opacity: .5;">
      <div class="minicolors-slider minicolors-sprite">
        <div class="minicolors-picker" style="top: 107.916666666667px;"></div>
      </div>

      <div class="minicolors-opacity-slider minicolors-sprite">
        <div class="minicolors-picker"></div>
      </div>

      <div class="minicolors-grid minicolors-sprite" style=
      "background-color: rgb(81, 255, 0);">
        <div class="minicolors-grid-inner"></div>

        <div class="minicolors-picker" style="top: 35px; right: 93px;">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>

我的JS：

 $(document).ready(function() {
      $.minicolors.defaults = $.extend($.minicolors.defaults, {
        animationSpeed: 50,
        animationEasing: 'swing',
        // change: null,
        changeDelay: 0,
        control: 'hue',
        defaultValue: '',
        hide: false,
        hideSpeed: 100,
        showSpeed: 100,
        inline: false,
        letterCase: 'uppercase',
        opacity: false,
        position: 'bottom right',
        show: true,
        action: 'click',
        theme: 'bootstrap',
        change: function(hex, opacity) {
          if (!hex) return;
          if (opacity) hex += ', ' + opacity;
          if (typeof console === 'object') {
            console.log(hex);
          }
        },
      });
      $('.minicolors input').minicolors({
        show: function() {
          console.log('Show event triggered!');
        }
      });
      $('.minicolors input').minicolors();

Answer 1

默认情况下隐藏您的HTML（显示：无），并在事件发生时使其显示（.show）。

JQuery颜色选择器在页面加载时显示

1 个答案: