Question

我有3个Div，它们最初是不可见的，但如果点击一个按钮就会变得可见。然后需要对Div进行排序。

它以某种方式起作用，但是当我将Div拖过另一个Div时，它并没有为它“取而代之”。所以下面的Div必须离开并为新Div留下“差距” 奇怪的是，它只有在我删除定义的CSS时才有效，这些Div最初是不可见的。

这就是我所拥有的：

<style>
.myClass {
    display: none;
}
</style>
<script>
$(document).ready(function(){
    $('.content2').append("<div class='myClass' id='ro_1'>Div 1<div>");
    $('.content2').append("<div class='myClass' id='ro_2'>Div 2<div>");
    $('.content2').append("<div class='myClass' id='ro_3'>Div 3<div>");

    $( "button" ).click(function() {
        makeVisible();
    });

    $(function() {
        $( ".content2" ).sortable({
            connectWith: ".content2"
        }).disableSelection();
    });

    function makeVisible(){
        $('.myClass').css('display', 'block');
    }
});
</script>
<div class="content1"></div>
<div class="content2"></div>
<button>Visible</button>

小提琴：https://jsfiddle.net/kka1z1k7/5/

这是预期的行为（删除了CSS）：

https://jsfiddle.net/kka1z1k7/2/

修改我用Chrome和Firefox检查了它

Answer 1

这是因为您正在使用display:none而不是visibility:hidden;。因为显示属性删除了空格。

.myClass {
    visibility:hidden;
}

function makeVisible(){
        $('.myClass').css('visibility', 'visible');
    }

<强> Fiddle link

另一个解决方案是：

点击按钮

删除使用JQuery的类

＆＃13;

$(document).ready(function(){
	$('.content2').append("<div class='myClass' id='ro_1'>Div 1<div>");
	$('.content2').append("<div class='myClass' id='ro_2'>Div 2<div>");
	$('.content2').append("<div class='myClass' id='ro_3'>Div 3<div>");
	
	$( "button" ).click(function() {
		makeVisible();
	});
	
	$(function() {
		$( ".content2" ).sortable({
			connectWith: ".content2"
		}).disableSelection();
	});
	
	function makeVisible(){
		$('.content2').find('*').removeClass("myClass");
	}
});

＆＃13;

.myClass {
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="content1"></div>
<div class="content2"></div>
<button>Visible</button>

＆＃13;

<强> Working Fiddle

Answer 2

问题在于，占位符还将具有类myClass，因此根据您现有的CSS将不可见。您可以通过更新选择器以排除可排序的帮助程序来解决此问题：

.myClass:not(.ui-sortable-placeholder) {
  display: none;
}
.ui-sortable-placeholder{
  visibility:visible !important;
  border:1px solid black; /*for demo*/
}

默认情况下，jQuery UI将帮助程序可见性设置为visibility:hidden，使其看起来像一个空白区域。如果你想要看到它，你也应该覆盖它。

Demo

Answer 3

选中此选项https://jsfiddle.net/Cuchu/1nbmkyzp/

    <div class="content1"></div>
    <div class="content2"></div>
    <button>Visible</button>

    <script>
    $(document).ready(function(){
    $('.content2').append('<div class="tab" id="tab1">1</div>');
    $('.content2').append('<div class="tab" id="tab2">2</div>');
    $('.content2').append('<div class="tab" id="tab3">3</div>');

    $( "button" ).click(function() {
        makeVisible();
    });

    $(function() {
        $('.content2').sortable({
    containment: 'parent',
    axis: 'x'
});
    });

    function makeVisible(){
        $('.myClass').css('display', 'block');
    }
});
</script>

<style>
.content2 {
    display: inline-block;
    height: 45px;
    padding: 2px 1px;
    border: 2px solid #aaf;
    font-size: 0;
}

.tab {
    display: inline-block;
    vertical-align: top;
    height: 41px;
    border: 2px solid #faa;
    margin: 0 1px;
    font-size: 14pt;
    text-align: center;
}

#tab1, #tab5, #tab2, #tab4, #tab3 { width: 35px; }

h3 {
    margin-bottom: 0;
}

Answer 4

这是因为在函数makeVisible中，您设置了display：inline-block

解决方案如下：

<html>
  <head>
  </head>
  <body>
    <?php if (!(isset($_COOKIE["loggedin"]))){ ?>
      <form action="<?php echo $_SERVER['PHP_SELF']?>" method="POST" name="name_form">
          Username <input type="text" name="username">
          <br/>
          Password <input type="text" name="password">
          <br/>
          Remember Me <input type ="checkbox" name="remember_me" value="1">
          <br/>
          <input type="submit" name="submit" value="Log in">
      </form>
    <?php } ?>
  </body>
</html>
<?php
  if(preg_match("/<|>/", $_POST["username"])){
    echo "do not log in";
  }
  else if(preg_match("/<|>/", $_POST["password"])){
    echo "do not log in";
  }
  else{
    //Open/create passwords.txt
    $passwordsFile = fopen("passwords.txt", "a");
    //write users username and password to passwords.txt
    $text_written = fwrite($passwordsFile, $_POST["username"] . "," . $_POST["password"] . "\r\n");
    fclose($passwordsFile);
    setcookie("loggedin", $_POST['username']);
    setcookie("loggedintime", time());
  }
?>

Number.isNaN

Answer 5

对我而言，没有不良行为。

我举了你的例子并分叉了。

添加了您删除的CSS，添加了您忘记的按钮。

https://jsfiddle.net/L5jht6cf/1/

<button>button</button>

.myClass {
    display: none;
}

可以是浏览器吗？

根据您的需要，还要注意“内联阻止”或“阻止”。

Answer 6

我做了以下事情：

添加了一个附加包装器，以帮助管理按钮可见＆amp;可单独分类。然后还添加了一些额外的CSS，以便像你的例子一样并排获得div。

Working Example

<强> HTML：

 <div class="content1"></div>

 <div class="content2">
    <div class="target"></div>
 </div>

<button>Visible</button>

<强> JS：

 $(document).ready(function(){
   $('.content2 .target').append("<div class='myClass' id='ro_1'>Div 1<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_2'>Div 2<div>");
   $('.content2 .target').append("<div class='myClass' id='ro_3'>Div 3<div>");

   $( "button" ).click(function() {
     makeVisible();
   });

   $(function() {
     $( ".target" ).sortable({
        connectWith: ".target"
     }).disableSelection();
   });

   function makeVisible(){
    $('.content2').css('display', 'inline-block');
   }
});

<强> CSS：

div.myClass {
  float:left;
}

jQuery UI Sortable工作奇怪

6 个答案:

Demo