样式化多个div在彼此之间切换不同

时间:2017-08-18 14:28:23

标签: javascript jquery html css

我创建了一个包含多个div的切换,以展示不同类别的内容。这是一个例子:

<div id="left"> 
<h4 class="expanding-header-active" profile='1'><a href="#">+ 1</a></h4>
 <div class="toggle-container" rel="profile_1">
   <ul>
   <li class="expanding-subhead-active" profile='4'><a href="#">A</a></li>
   </ul>
  </div>


<div id="right">
 <div class="toggle-container" rel="profile_4">
<h2>A</h2>
<p>yada yada yada</p>
</div>
</div>

我创造了一个小提琴,展示了我正在谈论的更多内容:

Fiddle

当点击内部div(A,B,C,D,E和F)时,我需要主div(+ 1,+ 2,+ 3)保持打开状态。但是,一次只能打开一个主要的div(+ 1,+ 2,+ 3)。

小提琴更新到更接近我需要的东西 - 但现在,有没有办法防止A和B同时打开而不牺牲当前的结构?

3 个答案:

答案 0 :(得分:0)

如果我认为我正确理解你的问题,你不能只注释掉这行:$(“。toggle-container”)。not($(this).next())。hide(300);

好的,刚看到你的其他评论。我认为改变下面的功能将实现您的需求。

def get_input_queue(csv_file_name, num_epochs=None):
    train_images = []
    train_labels = []
    for line in open(csv_file_name, 'r'):
        cols = re.split(',|\n', line)
        train_images.append(cols[0])                                
        train_labels.append([float(cols[1])])
        # train_labels.append([float(cols[1]), float(cols[2])])
    print([train_images, train_labels])
    print("Number of images :", len(train_images))
    input_queue = tf.train.slice_input_producer([train_images, train_labels], num_epochs=num_epochs)         # you should small num_epoch
                                                                                                                            # batch_size x
    return input_queue

def read_data(input_queue):
    image_file = input_queue[0]
    label = input_queue[1]

    image = tf.image.decode_jpeg(tf.read_file(image_file), channels=3)

    return image, label, image_file

def read_data_batch(csv_file_name, height, width, batch_size):
    input_queue = get_input_queue(csv_file_name)
    image, label, file_name = read_data(input_queue)
    image = tf.reshape(image, [height, width, 3])

    batch_image, batch_label, batch_file = tf.train.batch([image, label, file_name], batch_size=batch_size)                 # add allow_smaller_final_batch=True
    batch_file = tf.reshape(batch_file, [batch_size,1])

    return batch_image, batch_label, batch_file

答案 1 :(得分:0)

如果您不想隐藏此内容,只需删除要隐藏的命令即可。 删除这一行:

$(".toggle-container").not($(this).next()).hide(300);

http://jsfiddle.net/A8Ymj/1122/

答案 2 :(得分:0)

知道了!

需要将内部答案的类更改为.toggle-container-1并设置

 $('.toggle-container-1').hide();

 $(".expanding-subhead-active").on('click', function(e) {
 $(".toggle-container-1").not($(this).next()).hide(300);
  $("div[rel='profile_" + $(this).attr("profile") + "']").toggle(300, "linear");
});

Correct Fiddle

谢谢大家:)我是新人!