Question

当我单击测试1，测试2或测试3时，单击的div将突出显示其他两个div。我想要做的是，当div得到高亮显示时，页面的其他区域必须是暗的（不透明度降低）然后单击div仅从整页突出显示。任何人帮我完成这件事......

这里的工作示例

＆＃13;

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');
  });
});

＆＃13;

.container {
  width: 400px;
  margin: 0 auto;
}

.section {
  height: 50px;
  margin: 10px;
  background-color: red;
  color: white;
  box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  opacity: .3;
}

.section2 {
  height: 50px;
  background-color: green;
  color: white;
  margin: 10px;
  opacity: 1 !important;
  box-shadow: 3px 3px 15px #666;
  border: 1px solid #7d7d7d;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>This is header of the sample </header>
  <br/>
  <div class="div-list">
    <div class="section">
      <h2>Test 1</h2>
    </div>
    <div class="section">
      <h2>Test 2</h2>
    </div>
    <div class="section">
      <h2>Test 3</h2>
    </div>
  </div>
  <br/>
  <footer>
    <h3>This is footer of the sample </h3>
  </footer>
</div>

＆＃13;

Answer 1

当您点击其中一个元素时，您只需在整个容器或页面上设置黑色背景，并使用正确的不透明度。

  imports:
    - { resource: parameters.yml }
    - { resource: security.yml }
    - { resource: services.yml }
    - { resource: "@AdminBundle/Resources/config/services.yml" }
    - { resource: "@UserBundle/Resources/config/services.yml" }

# Put parameters here that don't need to change on each machine where the app is deployed
# http://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
parameters:
    locale: en

framework:
    #esi:             ~
    translator:      { fallbacks: ["%locale%"] }
    secret:          "%secret%"
    router:
        resource: "%kernel.root_dir%/config/routing.yml"
        strict_requirements: ~
    form:            ~
    csrf_protection: ~
    validation:      { enabled: true, enable_annotations: true }
    #serializer:      { enable_annotations: true }
    templating:
        engines: ['twig']
    default_locale:  "%locale%"
    trusted_hosts:   ~
    trusted_proxies: ~
    session:
        # http://symfony.com/doc/current/reference/configuration/framework.html#handler-id
        handler_id:  session.handler.native_file
        save_path:   "%kernel.root_dir%/../var/sessions/%kernel.environment%"
    fragments:       ~
    http_method_override: true
    assets: ~
# Twig Configuration
twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"

# Doctrine Configuration
doctrine:
    dbal:
        driver:   pdo_mysql
        host:     "%database_host%"
        port:     "%database_port%"
        dbname:   "%database_name%"
        user:     "%database_user%"
        password: "%database_password%"
        charset:  UTF8
        # if using pdo_sqlite as your database driver:
        #   1. add the path in parameters.yml
        #     e.g. database_path: "%kernel.root_dir%/data/data.db3"
        #   2. Uncomment database_path in parameters.yml.dist
        #   3. Uncomment next line:
        #     path:     "%database_path%"

    orm:
        auto_generate_proxy_classes: "%kernel.debug%"
        naming_strategy: doctrine.orm.naming_strategy.underscore
        auto_mapping: true
# Swiftmailer Configuration
swiftmailer:
    transport: "%mailer_transport%"
    host:      "%mailer_host%"
    username:  "%mailer_user%"
    password:  "%mailer_password%"
    spool:     { type: memory }

# FOSUserBundle
fos_user:
    db_driver:          orm
    firewall_name:      main
    use_listener:       false
    user_class:         UserBundle\Entity\User

# SonataAdminBundle

更新了 JsFiddle：https://jsfiddle.net/g1jqyk8x/5/

更新如果您希望突出显示消失，您必须编写一个功能，检查您是否点击了您的项目之外的身体。

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');
    $(".container").css({"background-color": "rgba(0,0,0,0.7)"});
  });
});

JsFiddle：https://jsfiddle.net/g1jqyk8x/6/

Answer 2

操纵html标签的不透明度和Z索引以及您突出显示的所述元素的z-index（更高）。

这是我编辑的唯一代码与你的相比：

$(function() {
 $('.section').click(function() {
 $('.section2').removeClass('section2');
 $(this).addClass('section2');
 $("html").css({"z-index" : "200", "opacity": "0.7","background": "black"});
});
});


.section2 {
  height: 50px;
  background-color: green;
  color: white;
  margin:10px;
  opacity: 1 !important;
  box-shadow: 3px 3px 15px #666;
  border: 1px solid #7d7d7d;
  z-index: 201;
}

Answer 3

我已更新了您的fiddle。请检查一下。

您需要添加的条件是检查＆＃39; .section＆＃39;如果有一个班级＆＃39; .section2＆＃39;。

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');  
    if ( $('.section').hasClass('section2') ) {
        $('body').addClass('darkBg');
        $('.section2').removeClass('section2');
        $(this).addClass('section2');          
        console.log('aaa');
    } else {
        $('body').removeClass('darkBg');
    }
  });
});

Answer 4

如果您只想降低其他项目的不透明度，您可以选择所有这些项目，但没有.section2类，而是添加.darken类。

＆＃13;

$(function() {
  $( '.section' ).click(function() {
    $( '.section2' ).removeClass( 'section2 darken' );
    $( this ).addClass( 'section2' );
    $( '.section:not( .section2 )' ).addClass( 'darken' );
  });
});

＆＃13;

.container {
  width: 400px;
  margin: 0 auto;
}

.section {
  height: 50px;
  margin: 10px;
  background-color: red;
  color: white;
  box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  opacity: .3;
  transition: opacity .5s, background-color .25s;
}

.section2 {
  height: 50px;
  background-color: green;
  color: white;
  margin: 10px;
  opacity: 1 !important;
  box-shadow: 3px 3px 15px #666;
  border: 1px solid #7d7d7d;
}

.darken {
  opacity: 0.1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>This is header of the sample </header>
  <br/>
  <div class="div-list">
    <div class="section">
      <h2>Test 1</h2>
    </div>
    <div class="section">
      <h2>Test 2</h2>
    </div>
    <div class="section">
      <h2>Test 3</h2>
    </div>
  </div>
  <br/>
  <footer>
    <h3>This is footer of the sample </h3>
  </footer>
</div>

＆＃13;

在Html页面中选择了div高亮显示

4 个答案: